How to make child element higher z-index than parent

Question

Suppose I have this code    lt div class  parent  gt       lt div class  child  gt          Hello world      lt  div gt   lt  div gt    lt div class  wholePage  gt  lt  div gt    This jsFiddle  http   jsfiddle net ZjXMR   Now  I need to have lt div class  child  gt  in above of  lt div class  wholePage  gt  but in the jsFiddle you can see that the child element rendered before  lt div class  wholePage  gt    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

User · Answer

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/

User · Answer

Try using this code  it worked for me   z-index  unset

User · Answer

Give the parent z-index  -1  or opacity  0 99

User · Answer

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

User · Answer

Use non-static position along with greater z-index in child element    parent       position  absolute     z-index  100      child       position  relative      z-index  101

User · Answer

Nothing is impossible  Use the force    parent       position  relative      child       position  absolute      top 0      left  0      right  0      bottom  0      z-index  100

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

Examples related to css

Examples related to z-index