How to make child element higher z-index than parent?

css z-index
Afshin Mehrabani picture Afshin Mehrabani · Apr 17, 2013 · Viewed 114k times · Source

Suppose I have this code:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

This jsFiddle: http://jsfiddle.net/ZjXMR/

Now, I need to have<div class="child"> in above of <div class="wholePage"> but in the jsFiddle you can see that the child element rendered before <div class="wholePage">.

If you remove the parent class position or z-index, everything works fine. This is the correct behavior that I need: http://jsfiddle.net/ZjXMR/1/

How can I do that with z-index and without removing anything from page?

Answer

Kyle picture Kyle · Apr 17, 2013

This is impossible as a child's z-index is set to the same stacking index as its parent.

You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.

Related questions

z-index not working with fixed positioning

I have a div with default positioning (i.e. position:static) and a div with a fixed position. If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element. Or …

Read More
Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More