can I override z-index inheritance from parent element?

Question

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.

Cotemporary

Answer 1

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.

Dowdell

so if I understand it right there is no way to "z-index" element relatively to its parent sibling way around for me then is adding child element 2222 directly to document.body and calculating its absolute position relative to 1111 using $().offset() – Cotemporary

I have this issue and it's not possible to truly "fix" this given the limitations of our CMS so I have to hack something together to get the modal underlay to work. The best idea I've come up with is that when I initiate the modal popup I reset the parent's z-index. On my way out of the modal I re-attach the original z-index inside the close modal function. – Hamann