Question

#twitter{
  width:50px;
  height:50px;
  position: absolute;
  right: 0%;
  bottom: 0%;
  background-color: orange; 
  z-index:-2;
}

#socialButton {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: green;
  z-index: 2;
}

#socialButtonRoot {
  width: 100px;
  height: 100px;
  top:20%;
  left:20%;
  position: absolute;
  background-color: hotpink;
  z-index: 5;
}

<div id="socialButtonRoot">
  <div id="socialButton">
    <div id="twitter"></div>
  </div>
</div>

这是简化版。

在我的react项目中，该组件创建了一些Dom节点，之后，我在CSS文件中为其设置了样式，大多数样式都可以正常工作，但是只有z-index样式无效，人们说我们应该设置位置，是的，我已经全部设置好了，但仍然无法正常工作。所以我认为这可能与React或JS有关，但是在我从React和JS中提取代码并在jsfiddle上对其进行测试之后，z-index仍然无法正常工作。然后，我将z-index值从2更改为“ 2”（字符串），它可以工作，但是我可以在Chrome的调试控制台中看到值“ 2”无效。

应该是正面具有最高z-index（5）的div socialButtonRoot，中间应该具有第二高z-index（2）的div socialButton和背面具有div twitter的div twitter，后者具有最低的z-index（5）索引。

但是在下面的结果中，它显示了div twitter在前面，并且div socialButton在中间，而div socialButtonRoot在后面，这是不正确的。

这是什么问题？

Answer 1

请参见The Stacking Context on MDN。

在以下情况下，堆叠上下文由文档中的任何位置的任何元素形成：…位置值为“绝对”或“相对”且z索引值为“ auto”以外的元素。

...

在堆叠上下文中，子元素根据先前解释的相同规则堆叠。重要的是，其子堆栈上下文的z-index值仅在此父对象中具有含义。堆叠上下文在父堆叠上下文中被原子地视为一个单元。

z-index在与之关联的堆栈上下文中放置一个元素。

提供元素position: absolute或position: relative会建立一个新的堆栈上下文。

因此#twitter位于由#socialButton表示的3维框中。

z-index用于该框，而不适用于整个文档。

（而且#socialButton以同样的方式位于#socialButtonRoot内部）。

如果您希望A呈现在B之下，则可以：

请勿position一个或
不要让B成为A的后代

Answer 2

将元素放置在另一个元素内时，子元素将显示在其父元素的顶部。这对于许多嵌套元素都是相同的，并且是默认的CSS行为。即使为父级设置的z-index值高于其子级元素也不会更改结果。在您的示例中：

<div id="socialButtonRoot">
  <div id="socialButton">
    <div id="twitter"></div>
  </div>
</div>

#socialButtonRoot将显示在底部。 #socialButton将显示在#socialBuuttonRoot的顶部。最重要的是，将显示#twitter。 z-index将被忽略，因为它仅影响相同级别的元素。

我建议您创建一个父级<div>并将所有三个<div>放在其中：

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 20vh;
  margin-left: 20vw;
}

#socialButtonRoot {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 5;
  background-color: hotpink;
}

#socialButton {
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: green;
}

#twitter {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 20%;
  bottom: 20%;
  background-color: orange;
  z-index: -2;
}

<div id="parent">
  <div id="socialButtonRoot"></div>
  <div id="socialButton"></div>
  <div id="twitter"></div>
</div>

我将position:relative用作父<div>，以便可以使用百分比来定位子<div>。我还分别使用margin-top和margin-left代替了top和left，因为后者不适用于相对定位的元素。

由于#socialButtonRoot是最大的<div>，并且位于其他两个前面，因此它是运行摘要时出现的唯一一个。您可以根据需要为每个z-index更改<div>

z-index堆栈无法正常工作

2 个答案: