#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;
}Run Code Online (Sandbox Code Playgroud)
<div id="socialButtonRoot">
<div id="socialButton">
<div id="twitter"></div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
这是一个简化版本.
在我的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,这是不对的.
这有什么问题?