Question

我有以下代码（示例）：

<div style="position: fixed">
  <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative">
  <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div>
</div>

对我而言，看起来AAA div应该显示在BBB div上，因为：

他们都指定了位置，这个位置支持z-index
AAA z-index（1）高于BBB z-index（0）

但是在结果HTML中，BBB显示在AAA之上。为什么？有没有描述这种行为的文件？

Answer 1

因为父级上的position和z-index启动了新的堆叠顺序。特别是第一个元素position: fixed。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

在以下场景中的任何元素中，在文档中的任何位置形成堆叠上下文：

...

位置值为“固定”或“粘滞”的元素（适用于所有移动浏览器，但不适用于较旧的桌面）。

所以第一个div的子z-index是相对于父级的，而不是文档的其余部分。

在此示例中，您希望将z-index应用于父级。

<div style="position: fixed; z-index: 1;">
  <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative;">
  <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div>
</div>

为什么带有z-index 0的元素显示在带有z-index 1的元素上方

1 个答案: