CODEWITHSUNDEEP
htmlcsspositionz-index
zomboble
zomboble

Reputation: 833

z-index for element however different positioning?

Fast question; if you have 2 divs, one absolutley positioned and one relative, it isnt doing the z-index, i have attached a jsfiddle.

If i make them both relative they go with the flow of the DOM and one goes above the other on the y axis rather than z, any ideas?

Example JSfiddle (thanks Onheiron for fixing the render in jsfiddle)

Screenshot of whats happening: https://i.sstatic.net/NmILA.png , the gray thing should be behind the image.

Thanks.

Upvotes: 0

Views: 96

Answers (2)

Fenton
Fenton

Reputation: 250942

To answer this question, I need to explain stacking context.

When you add a z-index to an element, it creates a stacking context. All child elements are then compared to this parent stacking context.

Your element "slideImg" has a z-index of 1000. Any child elements are then compared within the stacking context of this parent element. So the z-index of "shadow", which is 0, is actually "1000 + 0", because it is within the stacking context of "slideImg".

To put "shadow" behind "slideImg" you can reverse their nesting:

    <div id="shadow">    
          <div id="slideImg"></div>    
    </div>

Or put them adjacent to each other, so they are each considered in the same stacking context.

    <div id="shadow"></div>
    <div id="slideImg"></div>

There is an explanation of z-index and Stacking Context here.

Upvotes: 2

Christoph
Christoph

Reputation: 51201

You can't make a child appear behind it's parent! You can only do that with siblings.

See your updated fiddle

Upvotes: 3

Related Questions