html – z-index堆栈不能正常工作

概述参见英文答案 > How can i make an element from a bottom stacking context stays in front of another higher stacking context?                                     1个 #twitter{ width:50px; height:50px; pos 参见英文答案 > How can i make an element from a bottom stacking context stays in front of another higher stacking context?                                     1个

#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,这是不对的.

这有什么问题？

解决方法 见 The Stacking Context on MDN.

A stacking context is formed,anywhere in the document,by any element in the following scenarios: … Element with a position value “absolute” or “relative” and z-index value other than “auto”.

…

Within a stacking context,child elements are stacked according to the same rules prevIoUsly explained. importantly,the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

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

给予元素位置：绝对或位置：相对建立新的堆叠上下文.

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

z-index适用于该框,而不适用于整个文档.

(并且#socialbutton以相同的方式位于#socialbuttonRoot中).

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

>不要放置A或>不要让B成为A的后代

总结

以上是内存溢出为你收集整理的html – z-index堆栈不能正常工作全部内容，希望文章能够帮你解决html – z-index堆栈不能正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。