Question

我最近有一个错误，在jquery ui对话框中无法点击视频播放器。我最终通过覆盖位置来解决问题：相对;有位置：继承;

问题的其他解决方案包括删除位置：relative;完全或通过使玩家类的z-index为1以外的其他东西。

As I've read，这些都表明在这种情况下改变了堆叠环境，这解决了我的问题。但是，我仍然不太了解我的情况或堆叠上下文的情况。是否有其他人对可能发生的事情有任何好的例子/建议？

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

堆叠上下文

将z-index值定位并分配给HTML元素会创建堆叠上下文（分配非完整不透明度）。

堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。

每个堆叠上下文完全独立于其兄弟姐妹：处理堆叠时只考虑后代元素。

每个堆叠上下文都是自包含的：在堆叠元素的内容之后，整个元素将被视为父堆叠上下文的堆叠顺序。


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

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

换一种方式

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

...

[...]除了不透明度之外，几个较新的CSS属性也会创建堆叠上下文。其中包括：转换，过滤器，CSS区域，分页媒体以及其他可能的。作为一般规则，似乎如果CSS属性需要在屏幕外上下文中进行渲染，则必须创建新的堆叠上下文。

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

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

1 个答案:

堆叠上下文