FF4 overflow and z-index problem (child dont overflow another parent)

Question

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 even 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

Answer 1

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