html - 不同div的 child 的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

如果不更改 A 和 C 的 z-index，则无法实现。

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

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