Question

我有两个div，我只想让第二个在[在z-index]中第一个，我读到它here并且我发现我必须使用以下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中放置元素时，您可以根据最近的父元素（如果不存在）来执行它。这就是为什么我将两个内部div包装在一个外部的位置相对位置 - 将元素设置为相对位置不会改变它在页面上的位置，它将像任何其他内联或块级元素一样工作，但它将重置启动指向它的所有孩子，这是定位的，所以这样你就可以包含定位的元素。

You can learn more about css positioning here

如果你绝对不能使用绝对位置，你可以用位置相对做同样的技巧，它只需要你的一些数学运算：）

最后，如果你没有定位你的元素，z-index没有效果，除非你改变你的标记以使顶部元素存在于底部元素内，否则无法做到这一点

一般情况下尽量不要使用javascript，如果你可以通过纯css来实现它，它会让你的web应用程序更好：）

Answer 2

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

使用

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

Div高于另一个JQuery脚本不起作用！

2 个答案: