有人可以解释堆叠上下文吗？

Question

我最近有一个错误，其中视频播放器在 jquery ui 对话框中不可点击。我最终通过覆盖 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;
}

Answer 1

我发现 Phillip Walton 链接的文章对我理解堆栈上下文最有帮助......我在调试我自己的问题的过程中继续了这个学习之旅。

需要注意的是粉红色的正方形z-index: 100;下面淡蓝色广场出现z-index: 1;，因为它是由创建于堆叠环境约束.A在transform。

这个 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>

堆叠上下文

• 为 HTML 元素定位和分配 z-index 值会创建一个堆叠上下文（与分配非完全不透明度一样）。
• 堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。
• 每个堆叠上下文完全独立于它的兄弟：在处理堆叠时只考虑后代元素。
• 每个堆叠上下文都是自包含的：在元素的内容堆叠后，整个元素将按照父堆叠上下文的堆叠顺序考虑。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

换种说法

每个堆叠上下文都有一个 HTML 元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文会将其所有子元素限制在堆叠顺序中的特定位置。这意味着如果一个元素包含在堆叠顺序底部的堆叠上下文中，则无法让它出现在堆叠顺序中更高的不同堆叠上下文中另一个元素的前面，即使有z-index 十亿！

...

[...] 除了不透明度，一些较新的 CSS 属性还创建了堆叠上下文。这些包括：转换、过滤器、css-regions、分页媒体，以及其他可能的。作为一般规则，似乎如果 CSS 属性需要在屏幕外上下文中呈现，则它必须创建一个新的堆叠上下文。

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