在另一个JQuery脚本之上的Div无效！

Question

我有两个div，我只希望第二个在[在z-index中]在第一个之下，我在这里阅读了一下，发现我必须使用以下JQuery脚本：

<script type="text/javascript">
    $('#secondDiv').insertBefore('#firstDiv');
</script>

我试过了，但是对我不起作用，任何帮助！！

<DetailedTemplate>
<div id="firstDiv" style="background-color:Black">
    <asp:ImageButton ID="SelectButton" Visible='<%# org.SelectedValue == null || Container.DataElement("ID").ToString() != org.SelectedValue.ToString() %>' runat="server" CommandName="Select" CommandArgument='<%# Container.DataElement("ID") %>'
      OnPreRender="SelectButton_PreRender" style="border-style:none; Height:58px; width:113px; cursor:hand"  ImageUrl="~/Contents/Images/item-background.png"/>
</div>

<div id="secondDiv" style="background-color:Red" >
    <center style=" margin: 5px; padding-top: 5px; padding-right: 5px; padding-left: 5px;">
        <asp:LinkButton ID="lnkTitle" ForeColor="#6c1b24" Font-Bold="true" runat="server"
            Text='<%# Container.DataElement("Name") %>' NavigateUrl="http://google.com">
        </asp:LinkButton>
        <div runat="server" visible='<%# Convert.ToInt32(Container.DataElement("NumOfChildren")) > 0 %>'
            style="border: 1px solid #6c1b24; width: 15px; text-align: center; height: 15px;
            margin-top: 25px; background-color: #fddb73; font-size: larger; font-family: Courier New;">
            <asp:LinkButton ID="btnExpand" runat="server" ForeColor="#6c1b24" CommandArgument='<%# Container.DataElement("ID")%>'
                CommandName="Expand" Font-Underline="false" Text='<%# Container.NumberOfChildren > 0 ? "-" : "+" %>' />
        </div>
    </center>
</div>

<script type="text/javascript">
    $('#secondDiv').insertBefore('#firstDiv');
</script>
</DetailedTemplate>

注意：在我的情况下，我不能将div设置为绝对值。

Answer 1

您不需要任何JavaScript或jQuery，只需使用纯CSS即可轻松完成

您可以在此处看到一个示例： http : //jsfiddle.net/MQgAM/，但是有很多其他方法可以在纯CSS中进行...

请记住，当您在CSS中放置元素时，您会根据最近放置的父对象或body标签（如果不存在）进行操作。 那就是为什么我将两个内部div包裹在相对于位置相对的外部中-将元素设置为相对位置不会改变它在页面上的位置，它会像其他任何行内或块级元素一样工作，但是它将重置开始指向所有子元素的位置，即位置，因此可以包含位置元素。

您可以在此处了解有关CSS定位的更多信息

如果绝对不能使用绝对位置，则可以对相对位置使用相同的技巧，这将需要一些数学知识：)

最后，如果您不定位元素，则z-index无效，并且除非更改标记使顶部元素位于底部元素内，否则此操作无法完成。

通常，如果可以通过纯CSS尝试使用javascript，请尽量不要使用javascript，它会使您的Web应用程序更好：)

Answer 2

insertBefore()与z-index无关。 它将其添加到指定元素之前的DOM树中。

采用

$("#myId").css("z-index", "-10");