覆盖 CSS Z-Index 堆叠上下文

Question

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

不过根据What No One Told You About Z-Index的文章：

如果一个元素包含在堆叠顺序底部的堆叠上下文中，则无法让它出现在堆叠顺序更高的不同堆叠上下文中的另一个元素之前，即使使用z-index 十亿！

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

• 当一个元素是文档的根元素（元素）时
• 当元素具有非静态的位置值和非自动的 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

看起来像这样：

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

Answer 1

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

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

话虽如此，鉴于您的 HTML 和 CSS，只需将类重新分配给 div 元素应该是微不足道的，如其他答案和 here 所示，因此您所有的 divs 和 spans参与根堆叠上下文：

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

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

Answer 2

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

.red,
.green,
.blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

body,
div:first-child {
  transform-style: preserve-3d; /* this is important for the trick to work */
}
.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><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;