小编car*_*ary的帖子

z-index堆栈无法正常工作

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

这有什么问题?

html css

5
推荐指数
1
解决办法
76
查看次数

标签 统计

css ×1

html ×1