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

You are missing the stacking context. A very weird concept, resulting in unexpected behaviour. Short version; z-index-es are not global, but scoped. More info at https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_context_example_1 — Gerben, May 25 '11 at 15:03
@denisk you copied badly in your jsfiddle example, both parent divs have z-index:21 — I.G. Pascual, May 25 '11 at 15:04
great link thanks. please see answer below if I correctly understand stacking order. — Pierre, May 26 '11 at 06:31

I.G. Pascual · Accepted Answer · 2011-05-26T08:19:22.240

0

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

edited May 26 '11 at 08:19

answered May 25 '11 at 15:34

I.G. Pascual

5,818
5
42
58

I will try the child with absolute positions however for the stacking order. P1_child have the stacking order of 21.2 and P2_child an order of 21.1. So P1_child should overflow and appear above P2_child? z-indexes of the parents need to be the same for complicated reasons. – Pierre May 26 '11 at 06:30
1

Check [this link](https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context) to understand better, or [full documentation](https://developer.mozilla.org/en/Understanding_CSS_z-index). It does not have 21.2 or 21.1, it has 21, and inside that 21, it has 2... P1 (z-index:21) competes directly with P2 (z-index:21), and P1_child depends directly of P1 positioning, and so does P2_child depending on P2. – – I.G. Pascual May 26 '11 at 08:25
ok child as absolute en auto z-index does the trick. IE7 still has a problem which seems like a stacking order bug if anyone want to comment to work around that one please. – Pierre May 26 '11 at 08:31
I myself still have problems with ie7, there's [javascript workaround](http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/) that works for me, from the answer I got [here](http://stackoverflow.com/questions/6033979/css-dropdown-list-showing-behind-the-dropdown-below-ie6-ie7-absolute-positioni) – I.G. Pascual May 26 '11 at 08:51

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

1 Answers1