我试图覆盖/忽略元素的堆叠上下文,以便它可以相对于页面根位于z轴上.

然而,根据文章没有人告诉你Z-Index:

如果元素包含在堆叠顺序底部的堆叠上下文中,则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素前面,即使使用z-index也是如此十亿!

可以通过以下三种方式之一在元素上形成新的堆叠上下文:

• 当元素是文档的根元素(元素)时
• 当元素具有静态以外的位置值和除auto之外的z-index值时
• 当元素的不透明度值小于1时

使用以下示例:

.red, .green, .blue { position: absolute; }
.red   { background: red; }
.green { background: green; }
.blue  { background: blue; }

<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>

如果第一个div给出opacity:.99;,(这将创建一个新的堆叠内容的第一个节点上),那么,即使如果.red有z-index:1,它还是会被放置在其它元件后面,因为它只是呈现为堆栈内的最高元件.

在jsFiddle工作演示

看起来像这样:

问:有没有办法让元素忽略其任何父元素的堆栈上下文,并要求相对于页面的原始堆栈上下文定位？

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

这有什么问题？