Home/ Questions/Q 3723896
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T06:26:32+00:00

I have two divs, and I just want the second one to be under

  • 0

I have two divs, and I just want the second one to be under [in z-index] the first one, I read about it here and I figured out that I have to use the following JQuery script:

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

I tried it, but it didn’t work with me, Any help!!

<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>

Note: I can’t put my divs as absolute in my situation.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need any javascript or jQuery for this, it can be done easily with pure css

    You can see an example here: http://jsfiddle.net/MQgAM/ but there are lots of otehr ways to do it, in pure css…

    Remember that when you position elements in css you do it based on the nearest parent that is also positioned or the body tag if none exists. that why i wrapped the two inner divs in an outer that ahs position relative – setting an element to position relative will not change where it is on the page, it will work as any other inline or block level element, but it will reset the starting point for all children of it, that is positioned, so this way you can contain positioned elements.

    You can learn more about css positioning here

    If you absolutely cannot use position absolute, you can do the same trick with position relative, it will just take a bit of math on your side 🙂

    Lastly, if you don’t position your elemnts, z-index has no effect, and this cannot be done, unless you change your markup so the top elements lives inside the bottom element

    In general try not to use javascript if you can do it by pure css, it will make your web application much better 🙂

    • 0