FF4 溢出和 z-index 问题（子不会溢出另一个父）答案

【问题标题】：FF4 overflow and z-index problem (child dont overflow another parent)FF4 溢出和 z-index 问题（子不会溢出另一个父）
【发布时间】：2023-04-10 21:20:01
【问题描述】：

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

提前致谢

【问题讨论】：

您忘记包含代码了吗？
你的代码适合我：jsfiddle.net/X8h7k
您缺少堆叠上下文。一个非常奇怪的概念，导致意外的行为。简洁版本; z-index-es 不是全局的，而是作用域的。更多信息developer.mozilla.org/en/Understanding_CSS_z-index/…
@denisk 您在 jsfiddle 示例中复制得很糟糕，两个父 div 都有 z-index:21
很好的链接，谢谢。如果我正确理解堆叠顺序，请参阅下面的答案。

标签： css html overflow positioning z-index

【解决方案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查看测试

【讨论】：

我会尝试绝对位置的孩子，但是对于堆叠顺序。 P1_child 的堆叠顺序为 21.2，P2_child 的堆叠顺序为 21.1。那么P1_child 应该溢出并出现在P2_child 上方吗？由于复杂的原因，父母的 z-indexes 需要相同。
查看this link 以更好地理解，或查看full documentation。它没有 21.2 或 21.1，它有 21，在 21 里面，它有 2... P1 (z-index:21) 直接与 P2 (z-index:21) 竞争，而 P1_child 直接取决于 P1 定位，P2_child 也依赖于 P2。 ——
ok child as absolute en auto z-index 可以解决问题。 IE7 仍然有一个问题，如果有人想评论解决这个问题，这似乎是一个堆叠顺序错误。
我自己仍然有 ie7 的问题，有 javascript workaround 对我有用，从我得到的答案 here