覆盖CSS Z-Index堆叠上下文

Question

我正在尝试覆盖/忽略元素的堆叠上下文，以便它可以相对于页面根位于z轴上。

然而，根据文章What No One Told You About 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;，（在第一个节点上创建了new stacking context），那么即使<{>} .red有z-index:1，它仍会是放在其他元素后面，因为它只是呈现为该堆栈中的最高元素。

Working Demo in jsFiddle

看起来像这样：

Q ：元素是否有办法忽略其任何父元素的堆栈上下文，并要求相对于页面的原始堆栈上下文进行定位？

Answer 1

  

Q ：元素是否有办法忽略其任何父元素的堆栈上下文，并要求相对于页面的原始堆栈上下文进行定位？

不，如果不重新定位DOM中的元素，就无法在堆叠上下文之间传输定位元素。您甚至无法使用position: fixed或position: absolute将元素移动到根堆叠上下文（正如您所观察到的，.red相对于其父div:first-child定位，因为它创建一个新的堆叠上下文。）

话虽如此，鉴于您的HTML和CSS，将类重新分配给div元素应该是微不足道的，如其他答案和here所示，所以div所有span s和<div class="red"><span>Red</span></div> <div class="green"><span>Green</span></div> <div class="blue"><span>Blue</span></div> 参与根堆叠上下文：

{{1}}

但你的情况可能并不像看起来那么简单。

Answer 2

我们可以使用3D变换来做到这一点，即使将任何元素困在堆叠上下文中，我们也可以将其放在最前面：

body {
  transform-style:preserve-3d; /* this is important for the trick to work */
}
.red,
.green,
.blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  top: 20px;
  left: 20px;
  background: red;
  /*z-index: 1; we no more need this */
  transform:translateZ(1px); /* this will do the trick  */
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

div:first-child {
  opacity: .99;
}

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

此处有更多详细信息和示例：Why can't an element with a z-index value cover its child?

Answer 3

如The stacking context中所述：“使用z-index，某些元素的呈现顺序受其z-index值影响。这是因为这些元素具有特殊的属性，导致它们形成堆叠上下文。

要部分解决堆栈内容问题，可以使用css属性显示不需要的元素：

opacity: 0.1;

或

display: none;