html - 嵌套固定元素的 z-index 问题和溢出 :hidden

Question

这似乎很费脑子，但我会试一试:

我有一个嵌套元素 position:fixed (.inside) 在另一个元素 (.bottom) 中，该元素也是固定的并且有溢出:隐藏。我需要让嵌套元素从隐藏元素中取出并与另一个元素 (.top) 重叠，并将更高的 z-index 作为父元素。这意味着:.inside 应该覆盖所有内容。

不幸的是，我无法更改 HTML 范围，也无法更改 .top 和 .bottom 的 z-index 值。当然不是 overflow: hidden ……

这是标记:

<div class="header">
  <div class="top"></div>
  <div class="bottom">
    <div class="inside"></div>
  </div>
</div>

... 和 CSS:

body {
    margin: 0;
    padding: 0;
}

.header {
    position: relative;
    z-index: 1;
}

.top {
    background: aqua;
    height: 40px;
    opacity: 0.5;
    position: fixed; /* important – do not change! */
    width: 100%;
    z-index: 5; /* important – do not change! */
}

.bottom {
    background: green;
    height: 40px;
    overflow: hidden; /* important – do not change! */
    position: fixed; /* important – do not change! */
    top: 40px;
    width: 100%;
    z-index: 3; /* important – do not change! */
}

.inside {
    background: red;
    height: 40px;
    position: fixed; /* important – do not change! */
    top: 20px;
    width: 100px;
    z-index: 10; /* doesn't work! */
}

这是 fiddle :http://jsfiddle.net/c7qqtu95/1/

Answer 1

您的嵌套元素位于其父元素的堆叠上下文中

将 overflow: hidden 应用于具有固定位置子级的父级 usually doesn't hide the child .但是父元素的堆叠上下文确实对其固定位置的子元素有影响。

问题是 .inside 没有在 'z' 轴上独立索引，因为它是其父级 .bottom 的堆栈上下文的一部分，它有它的应用了自己的 z-index。即使没有定义的 z-index，.bottom 也会创建一个新的堆叠上下文，因为它也有 position: fixed。

根据 MDN's documentation on stacking context :

• Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity).
• Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
• Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.
• Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

对于 .inside，您必须从 .bottom 中删除 position: fixed 和 z-index在 .top 的相同堆栈上下文中。

那么您唯一的办法就是在 .bottom 上使用 position: absolute，此时您用 /* import 指示的三个属性中的两个- 不要换! */ 将被更改。

如果您无法适应这些更改或无法编辑 HTML，那么您就没有办法了。

body {
    margin: 0;
    padding: 0;
}

.header {
    position: relative;
    z-index: 1;
}

.top {
    background: aqua;
    height: 40px;
    opacity: 0.5;
    position: fixed; /* important – do not change! */
    width: 100%;
    z-index: 5; /* important – do not change! */
}

.bottom {
    background: green;
    height: 40px;
    overflow: hidden; /* important – do not change! */
    /*position: fixed; *//* important – do not change! */
    position: absolute;
    top: 40px;
    width: 100%;
    /* z-index: 3; *//* important – do not change! */
}

.inside {
    background: red;
    height: 40px;
    position: fixed; /* important – do not change! */
    top: 20px;
    width: 100px;
    z-index: 10; /* this works now! */
}

<div class="header">
    <div class="top"></div>
    <div class="bottom">
        <div class="inside"></div>
    </div>
</div>