How to get a parent element to appear above child

Question

I have two nested CSS elements  I need to get the parent to be on top  that is  above in z-axis  of the child element  Just setting z-index is not sufficient    I can t set a negative z-index on the child  that ll set it to below the page container on my actual page  Is this the only method   http   jsbin com ovafo edit   x000D   x000D   parent   x000D    position   relative  x000D    width  750px  x000D    height  7150px  x000D    background  red  x000D    border  solid 1px  000  x000D    z-index  1  x000D    x000D   child   x000D    position  absolute  x000D    background-color  blue  x000D    z-index  0  x000D    color  white  x000D    top  0  x000D    x000D   wrapper x000D    x000D    position  relative  x000D    background  green  x000D    z-index  10  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  parent  gt  x000D      parent parent x000D       lt div class  child  gt  x000D        child child child x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You would need to use position relative or position absolute on both the parent and child to use z-index

User · Answer

Cracked it  Basically  what s happening is that when you set the z-index to the negative  it actually ignores the parent element  whether it is positioned or not  and sits behind the next positioned element  which in your case was your main container  Therefore  you have to put your parent element in another  positioned div  and your child div will sit behind that   Working that out was a life saver for me  as my parent element specifically couldn t be positioned  in order for my code to work   I found all this incredibly useful to achieve the effect that s instructed on here  Using only CSS  show div on hover over  lt a gt

User · Answer

Set a negative z-index for the child  and remove the one set on the parent    x000D   x000D   parent   x000D      position  relative  x000D      width  350px  x000D      height  150px  x000D      background  red  x000D      border  solid 1px  000  x000D    x000D   parent2   x000D      position  relative  x000D      width  350px  x000D      height  40px  x000D      background  red  x000D      border  solid 1px  000  x000D    x000D   child   x000D      position  relative  x000D      background-color  blue  x000D      height  200px  x000D    x000D   wrapper   x000D      position  relative  x000D      background  green  x000D      height  350px  x000D    x000D   lt div class  wrapper  gt  x000D       lt div class  parent  gt parent 1 parent 1 x000D           lt div class  child  gt child child child lt  div gt  x000D       lt  div gt  x000D       lt div class  parent2  gt parent 2 parent 2 x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    https   jsfiddle net uov5h84f

User · Answer

style    parent    overflow hidden    width 100px      child    width 200px      body    lt div class  parent  gt      lt div class  child  gt  lt  div gt   lt  div gt

User · Answer

Some of these answers do work  but setting position  absolute  and z-index  10  seemed pretty strong just to achieve the required effect  I found the following was all that was required  though unfortunately  I ve not been able to reduce it any further   HTML    lt div class  wrapper  gt       lt div class  parent  gt           lt div class  child  gt                           lt  div gt       lt  div gt   lt  div gt    CSS    wrapper       position  relative      z-index  0      child       position  relative      z-index  -1      I used this technique to achieve a bordered hover effect for image links  There s a bit more code here but it uses the concept above to show the border over the top of the image   http   jsfiddle net g7nP5

User · Answer

Since your divs are position absolute  they re not really nested as far as position is concerned  On your jsbin page I switched the order of the divs in the HTML to    lt div class  child  gt  lt div class  parent  gt  lt  div gt  lt  div gt    and the red box covered the blue box  which I think is what you re looking for

User · Answer

Fortunately a solution exists  You must add a wrapper for parent and change z-index of this wrapper for example 10  and set z-index for child to -1    x000D   x000D   parent   x000D      position  relative  x000D      width  750px  x000D      height  7150px  x000D      background  red  x000D      border  solid 1px  000  x000D      z-index  initial  x000D    x000D   x000D   child   x000D      position  relative  x000D      background-color  blue  x000D      z-index  -1  x000D      color  white  x000D    x000D   x000D   wrapper   x000D      position  relative  x000D      background  green  x000D      z-index  10  x000D    x000D   lt div class  wrapper  gt  x000D       lt div class  parent  gt parent parent x000D           lt div class  child  gt child child child lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] How to get a parent element to appear above child

Examples related to css

Examples related to z-index