Проблема переполнения FF4 и z-index (дочерний элемент не переполняет другого родителя) - PullRequest
Новая
       33

Проблема переполнения FF4 и z-index (дочерний элемент не переполняет другого родителя)

0 голосов
/ 25 мая 2011

У меня эта, казалось бы, простая проблема в FF4.
В приведенном ниже коде мне нужно P1_child, чтобы переполнить (и поместить выше) P2_child. Однако P1_child исчезает за P2 (даже не говоря о P2_child, как предполагалось)

Я что-то упустил? 

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

Заранее спасибо

1 Ответ

0 голосов
/ 25 мая 2011

Вам необходимо присвоить position:absolute дочерним элементам div (иначе z-index не будет работать), таким образом они будут позиционироваться относительно своих родителей (как у них position:relative).

Вам также необходимо удалить z-index из родительских элементов div, потому что когда вы присваиваете z-index относительным позиционированным элементам, дочерние элементы позиционируются относительно контекста стека их родителей. У вас есть полная документация здесь . 

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

Или проверьте это и протестируйте в this jsFiddle

...