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

CssZ Index

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

Nothing is impossible. Use the force.

.parent {
    position: relative;
}

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

Solution 3 - Css

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/

Solution 4 - Css

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

Solution 5 - Css

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

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

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

Solution 6 - Css

Try using this code, it worked for me:

z-index: unset;
Categories
Recommended Css Solutions
Recommended Z Index Solutions

Previous Solution:

jQuery append() vs appendChild()

JavascriptJqueryAppendAppendchild

Next Solution:

Following git-flow how should you handle a hotfix of an earlier release?

GitBranchGit FlowHotfix

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAfshin MehrabaniView Question on Stackoverflow
Solution 1 - CssKyleView Answer on Stackoverflow
Solution 2 - CsssupermasherView Answer on Stackoverflow
Solution 3 - CssMythThrazzView Answer on Stackoverflow
Solution 4 - CssGreg BennerView Answer on Stackoverflow
Solution 5 - CssPriyanshu ChauhanView Answer on Stackoverflow
Solution 6 - CssCarlos AlemanView Answer on Stackoverflow