FF4 overflow and z-index problem (child dont overflow another parent)
I have this seemingly easy issue in FF4.
In the code below I need P1_child to overflow (and placed above) P2_child. However P1_child disappears behind P2 (not e开发者_StackOverflow中文版ven to speak of P2_child as intended)Am I missing something simple?
<div>
<div id="P1" style="position:relative; z-index: 21;">
<div id="P1_child" style="z-index: 2;"></div>
</div>
<div id="P2" style="position:relative; z-index: 21;">
<div id="P2_child" style="z-index: 1;"></div>
</div>
</div>
Thanks in advance
You need to assign position:absolute
to child divs (otherwise z-index
won't work), that way they will position relative to theirs parents (as they have position:relative
).
You also need to remove z-index
from parent divs, because when you assign z-index
to relative positioned elements, child elements are positioned relative to their parents stacking context. You have full documentation here.
<div>
<div id="P1" style="position:relative">
<div id="P1_child" style="z-index: 2; position:absolute">P1</div>
</div>
<div id="P2" style="position:relative">
<div id="P2_child" style="z-index: 1; position:absolute">P2</div>
</div>
</div>
Or check it and test it in this jsFiddle
精彩评论