30

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

但是，根据文章What No One Told You About Z-Index：

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

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

  • 当一个元素是文档的根元素时（元素）
  • 当一个元素的位置值不是 static 并且 z-index 值不是 auto 时
  • 当元素的不透明度值小于 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;创建一个新的堆叠上下文），那么即使.redhas z-index:1，它仍然会被放置在其他元素的后面，因为它只是呈现为该堆栈中的最高元素。

jsFiddle 中的工作演示

看起来像这样：

演示

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

4

3 回答 3

24

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

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

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

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

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

于 2013-11-08T04:33:42.403 回答
3

我们可以使用 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>

更多细节和例子在这里：为什么一个具有 z-index 值的元素不能覆盖它的子元素？

于 2020-09-10T22:27:24.260 回答
1

正如堆叠上下文中所述：“使用 z-index，某些元素的渲染顺序受其 z-index 值的影响。发生这种情况是因为这些元素具有导致它们形成堆叠上下文的特殊属性。

要部分克服堆叠内容问题，您可以使用 css 属性来显示不需要的元素：

opacity: 0.1;

或者

display: none;
于 2018-08-17T07:14:18.507 回答