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

Question

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 1

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.

Answer 2

Nothing is impossible. Use the force.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

Answer 3

To achieve what you want without removing any styles you have to make the z-index of the '.parent' class bigger then the '.wholePage' class.

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

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

Answer 4

Give the parent z-index: -1, or opacity: 0.99

Answer 5

Use non-static position along with greater z-index in child element:

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}

Answer 6

Try using this code, it worked for me:

z-index: unset;