z-index堆栈无法正常工作

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"(一个字符串),它工作,但我可以看到值"2"在chrome的调试控制台中无效.

它应该是前面具有最高z-index(5)和div socialButton的div socialButtonRoot,其中后面有第二个高z-index(2)和div twitter,它们具有最低的z-index.

但是在下面的结果中,它显示,前面的div和中间的div socialButton和背面的div socialButtonRoot,这是不对的.

这有什么问题？

Answer 1

请参阅MDN上的堆叠上下文.

通过以下场景中的任何元素在文档中的任何位置形成堆叠上下文:...具有位置值"绝对"或"相对"的元素和除"自动"之外的z-index值.

...

在堆叠上下文中,子元素根据先前解释的相同规则堆叠.重要的是,其子堆叠上下文的z-index值仅在此父级中具有含义.堆叠上下文在父堆叠上下文中作为单个单元原子地处理.

将z-index元素放置在与其关联的堆叠上下文中.

提供元素position: absolute或position: relative建立新的堆叠上下文.

因此#twitter位于由3-d框表示的内部#socialButton.

该z-index是那个盒子,而不是整个文档.

(并且以相同的方式#socialButton进入内部#socialButtonRoot).

如果你想要A在B下面渲染,那么:

• 不要positionA 或
• 不要让B成为A的后代