Question

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

提前致谢

Answer 1

您需要将position:absolute分配给子div（否则z-index将无效），这样他们将相对于他们的父母定位（因为他们有position:relative）。

您还需要从父div中删除z-index，因为当您将z-index指定给相对定位的元素时，子元素相对于其父级堆叠上下文定位。您有完整的文档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>

或者检查并在this jsFiddle

中进行测试

FF4溢出和z-index问题（孩子不要溢出另一个父母）

1 个答案: