覆盖CSS Z-Index堆叠上下文

Question

我试图覆盖/忽略元素的堆叠上下文,以便它可以相对于页面根位于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工作演示

看起来像这样:

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

Answer 1

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

不,如果不重新定位DOM中的元素,则无法在堆叠上下文之间传输定位元素.您甚至无法使用position: fixed或将元素移动到根堆叠上下文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>

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

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?