4

我最近遇到了一个错误，即无法在 jquery ui 对话框中单击视频播放器。我最终通过覆盖 position:relative; 解决了这个问题。有一个职位：继承；

该问题的其他解决方案包括删除 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;
}
4

1 回答 1

5

我发现菲利普沃尔顿链接的文章对我理解堆叠上下文最有帮助......我在调试我自己的问题的过程中进行了这次学习之旅。

请注意，粉红色的正方形z-index: 100;出现在浅蓝色正方形的下方，z-index: 1;因为它.A受transform.

jsbin 代码片段的输出

这个 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-index 十亿！

...

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

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

于 2016-05-22T04:13:57.347 回答