How to make child element higher z-index than parent?
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.
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/
Nothing is impossible. Use the force.
.parent {
position: relative;
}
.child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
Give the parent z-index: -1, or opacity: 0.99