Menu
Is there any way to override z-index inheritance from parent elements when using absolute position. I want 2222 div to be on top of 0000 div:
<div style="background-color:green; z-index:10; position:relative"> OOOO </div> <div style="background-color:yellow; z-index:5; position:relative"> 1111 <div style="position:absolute; background-color:red; z-index:15; top:-8px; left:20px"> 2222 </div> </div> I can not change z-index of 0000 or 1111 divs and I am trying to position my 2222 element relative to 1111 element.
554
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.
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.
No, it isn't inherited.
I believe z-index is relative to the nearest positioned element. So, if you had two divs inside the "1111" div, they could be z-index'd relative to each other, but since 2222 is a child of 1111, it cannot be z-indexed relative to 0000, and will always be above 1111.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
