html - 不同div的孩子的z指数

Question

我遇到了一些 z-index 的问题

可以说我有以下

<div id="A"> z-index = 2
   <div id="B"></div> 
</div>

<div id="C"> z-index = 1
   <div id="D"></div>
</div>

我希望“D”在“B”之上

当然这只是一个例子，我知道如果我交换 A 和 C 的 z-index 会得到我的要求，但显然比这复杂得多，但本质是这样，鉴于我发布的情况，如何我可以让D在B上面吗？

请帮忙！！

Answer 1

z-index如果不更改A 和 C的值，您将无法实现这一点。

CSS 中堆叠上下文的工作方式是，当创建一个新的堆叠上下文时（通过设置 z-index 并定位元素，或者设置不透明度 < 1），它会受到其父级或后代的堆叠上下文的限制。也就是说，如果 C 的z-index值低于其兄弟 A，则 C 的任何后代都不能高于 A 或其后代。就像 A 比 C 无限高，所以即使 D 有z-index，1000000000它也不会像 C 一样高。

您可以将其视为一本书的部分，其中 1.10 在 2.1 之前，1.10000 也是如此。