有人能解释一下堆叠上下文吗？

Question

我最近遇到一个bug，jquery ui对话框内的视频播放器无法点击。最终我通过将position:relative;覆盖为position:inherit;来解决了这个问题。

其他解决方案包括完全删除position:relative;或者使播放器类的z-index不是1。

据我所读，这两种方法都表明在此情况下更改堆叠上下文可以解决我的问题。然而，我仍然不太理解我的情况或堆叠上下文的整体情况。是否有人有任何好的例子/建议可以说明可能发生了什么？

<div class="player"> 
    <div id="videoPlayer_wrapper" style=" position: relative; width:580px; height: 192px;">
        <object type="application/x-shockwave-flash" data="/flash/player.swf" width="100%" height="100%" bgcolor="#000000" id="videoPlayer" name="videoPlayer" tabindex="0">
        </object>
    </div> 
</div>

播放器的CSS存放位置

.player {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

- Michael Alan Huff

---

在这里，他们非常详细地解释了它：http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ - Kingk

很棒的文章，Kingk。非常感谢。 - Michael Alan Huff

Answer 1

我发现你链接的Phillip Walton的文章对我理解堆叠上下文非常有帮助...在调试自己的问题时，我参考了这篇文章。

请注意，具有z-index：100;的粉色正方形出现在具有z-index：1;的浅蓝色正方形下面，因为它受到由transform在 .A 上创建的堆叠上下文的限制。

这个jsbin比SO内联代码更容易进行实验：https://jsbin.com/lataga/2/edit?css,output

div {
  width: 200px;
  height: 200px;
  padding: 1rem;
}

.A {
  position: absolute;
  background-color: red;

  /*
    Adding a transform here creates a
    new stacking context for the children of .A
    */
  transform: translateX(0);

  /*
    several other properties can trigger creation of stacking context,
    including opacity < 1
    */
  /*    opacity: 0.99; */

  /*
    If we raise .A above .B, the children will rise up with it;
    uncomment the following to see:
    */
  /*    z-index: 3; */
}

.a {
  position: relative;

  /*
    even a much higher z-index can't lift .a above .b when
    it is constrained to a lower stacking context
    */
  z-index: 100;

  margin-left: 125px;
  background-color: pink;
}

.B {
  position: absolute;
  margin-top: 75px;
  /*    z-index: 2; */
  background-color: blue;
}

.b {
  margin-left: 50px;
  background-color: lightblue;

  /*
    The following is not necessary: if a z-index is not specified,
    then it is calculated according to the rules of 
    natural stacking order...
    I'm just specifying it explicitly for editorial effect.
    */
  z-index: 1;
}

<div class="A">
  A: 1
  <div class="a">a: 1.100</div>
</div>
<div class="B">
  B: 2
  <div class="b">b: 2.1</div>
</div>

堆叠上下文（Stacking Context）

• 为HTML元素设置定位和z-index属性，或将不完全透明度赋值给元素，都会创建一个堆叠上下文。
• 堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。
• 每个堆叠上下文都是彼此独立的：只有后代元素在堆叠顺序处理时会被考虑。
• 每个堆叠上下文都是自包含的：在元素内容堆叠完成后，整个元素按照父堆叠上下文的堆叠顺序进行处理。

注意：堆叠上下文的层次结构是HTML元素层次结构的子集，因为只有特定的元素会创建堆叠上下文。我们可以说，不创建自己的堆叠上下文的元素被父堆叠上下文所包含。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

---

换句话说

每个堆叠上下文都有一个HTML元素作为其根元素。当在一个元素上创建新的堆叠上下文时，该堆叠上下文将其所有子元素限定在特定的堆叠顺序中。这意味着，如果一个元素包含在堆叠顺序最低的堆叠上下文中，则无论z-index属性设置为多少，也不能使它出现在位于堆叠顺序较高的不同堆叠上下文中的其他元素前面。

...

[...] 除了透明度外，还有一些新的CSS属性也会创建堆叠上下文。这些包括：transforms（变换）、filters（滤镜）、css-regions（CSS区域）和分页媒体等。通常情况下，如果CSS属性要求在屏幕外渲染，那么它必须创建一个新的堆叠上下文。

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

- ptim