CSS z-index not working position absolute

Question

I am trying to make the black div  relative  above the second yellow one  absolute   The black div s parent has a position absolute  too    x000D   x000D   relative   x000D   position  relative  x000D   width  40px  x000D   height  100px  x000D   background   000  x000D   z-index  1  x000D   margin-top  30px  x000D    x000D   absolute   x000D   position  absolute  x000D   top  0  left  0  x000D   width  200px  x000D   height  50px  x000D   background  yellow  x000D   z-index  0  x000D    x000D   lt div class  absolute  gt  x000D       lt div id  relative  gt  lt  div gt  x000D   lt  div gt  x000D   lt div class  absolute  style  top  54px  gt  lt  div gt  x000D   x000D   x000D    Expected Result

User · Answer

Just add the second  absolute div before the other  second div    lt div class  absolute  style  top  54px  gt  lt  div gt   lt div class  absolute  gt       lt div id  relative  gt  lt  div gt   lt  div gt    Because the two elements have an index 0

User · Answer

I was struggling to figure it out how to put a div over an image like this    No matter how I configured z-index in both divs  the image wrapper  and the section I was getting this     Turns out I hadn t set up the background of the section to be background  white   so basically it s like this    lt div class  img-wrp  gt     lt img src  myimage svg   gt   lt  div gt   lt section gt    lt other content gt   lt  section gt   section    position  relative    background  white     THIS IS THE IMPORTANT PART NOT TO FORGET       img-wrp    position  absolute    z-index  -1     also worked with 0 but just to be sure

User · Answer

JSFiddle  You have to put the second div on top of the first one because the both have an z-index of zero so that the order in the dom will decide which is on top  This also affects the relative positioned div because its z-index relates to elements inside the parent div    lt div class  absolute  style  top  54px  gt  lt  div gt   lt div class  absolute  gt       lt div id  relative  gt  lt  div gt   lt  div gt    Css stays the same

User · Answer

try this code    absolute       position  absolute      top  0  left  0      width  200px      height  50px      background  yellow       http   jsfiddle net manojmcet ks7ds

User · Answer

I was struggling with this problem  and I learned  thanks to this post  that   opacity can also affect the z-index   x000D   x000D  div first-child   x000D    opacity   99   x000D    x000D   x000D   red   green   blue   x000D    position  absolute  x000D    width  100px  x000D    color  white  x000D    line-height  100px  x000D    text-align  center  x000D    x000D   x000D   red   x000D    z-index  1  x000D    top  20px  x000D    left  20px  x000D    background  red  x000D    x000D   x000D   green   x000D    top  60px  x000D    left  60px  x000D    background  green  x000D    x000D   x000D   blue   x000D    top  100px  x000D    left  100px  x000D    background  blue  x000D    x000D   lt div gt  x000D     lt span class  red  gt Red lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt span class  green  gt Green lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt span class  blue  gt Blue lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Remove  z-index 0    from  absolute   Updated fiddle here

User · Answer

I solved my z-index problem by making the body wrapper z-index -1 and the body z-index -2  and the other divs z-index 1    And then the later divs didn t work unless I had z-index 200   Even though I had position relative on each element  with the body at default z-index it wouldn t work    Hope this helps somebody

User · Answer

This is because of the Stacking Context  setting a z-index will make it apply to all children as well   You could make the two  lt div gt s siblings instead of descendants    lt div class  absolute  gt  lt  div gt   lt div id  relative  gt  lt  div gt    http   jsfiddle net P7c9q 3

User · Answer

How about this   http   jsfiddle net P7c9q 4    lt div class  relative  gt     lt div class  yellow-div  gt  lt  div gt     lt div class  yellow-div  gt  lt  div gt     lt div class  absolute  gt  lt  div gt   lt  div gt    relative  position relative      absolute   position absolute  width  40px  height  100px  background   000  z-index  1  top 30px  left 0px     yellow-div   position relative  width  200px  height  50px  background  yellow  margin-bottom 4px  z-index 0      use the relative div as wrapper and let the yellow div s have normal positioning   Only the black block need to have an absolute position then

[html] CSS z-index not working (position absolute)

Examples related to html

Examples related to css

Examples related to css-position

Examples related to absolute