Div above another one JQuery script didn't work !

Question

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.

Martin Jespersen · Accepted Answer · 2011-01-19T10:43:30.780

2

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

edited Jan 19 '11 at 10:43

answered Jan 19 '11 at 10:28

Martin Jespersen

25,743
8
56
68

@Martin: Thanks for the answer and the example, but I mentioned that I can't use `position` with `absolute`. – Homam Jan 19 '11 at 10:42
1

@john: can you explain why? as i have shown, if you just wrap them in a relativly positioned element they will be contained and easy to control – Martin Jespersen Jan 19 '11 at 10:44
This template is for a third-party control. and it's correpted when I use the absolute position in my divs. – Homam Jan 19 '11 at 10:46
1

@John-89 Wrap your two divs in another which has `position: relative` and then it should make no difference to your third-party control that the two divs are `position: absolute` – robertc Jan 19 '11 at 10:58

score 1 · Answer 2 · answered Jan 19 '11 at 10:29

1

insertBefore() has nothing to do with z-index. It adds it to the DOM tree before the element specified.

Use

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

answered Jan 19 '11 at 10:29

Aliostad

80,612
21
160
208

It didn't work with me, seems that `z-index` needs some other styles to work, sorry I'm beginner. – Homam Jan 19 '11 at 10:35
z-index doesn't work without positioning, look at my example on jsfiddle – Martin Jespersen Jan 19 '11 at 10:37

Div above another one JQuery script didn't work !

2 Answers2