在绝对定位覆盖层上方显示固定位置元素的子元素

Question

我有一个包含两列的布局。左栏垂直滚动，右栏固定。右列包含多个部分。

在某些时候，将显示叠加层。我希望它涵盖除右栏 ( <aside class="one">...</aside>) 中第一部分之外的所有内容。

现在，当显示覆盖层时，它会覆盖所有内容，包括aside.one元素，即使它具有更高的 z-index 值。

HTML：

<!-- ... -->

<section id="sidebar">
    <aside class="one">...</aside>
    <aside class="two">...</aside>
</section>

<!-- ... -->

<div class="overlay"></div>

CSS：

#sidebar {
    position: fixed;
}

.one {
    z-index: 3;
}

.overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

这是一个 jsFiddle 说明了我的问题的更完整示例：http://jsfiddle.net/ncSWz/10/

我知道我需要更改一些 HTML 结构才能使其正常工作，但我不确定从哪里开始。

提前致谢。

Answer 1

这个问题实际上涉及到一些堆栈上下文。

这个想法本质上是，您需要在相同的堆栈上下文中同时拥有.overlay和。您可以通过将移入 来aside.one实现这一点（因为它是- 这会创建一个堆叠上下文）。.overlay#sidebarposition: fixed

接下来，您需要在侧边栏中创建更多嵌套的堆叠上下文。aside.one通过更改torelative和.overlayto的定位fixed，您可以创建另外 2 个堆叠上下文，允许您使用z-index元素。

最后，您需要更改 z-index，#header使其位于覆盖层下方。

• 根元素（HTML），
• 使用“auto”以外的 z-index 值（绝对或相对）定位，
• 不透明度值小于 1的元素。
• 在移动 WebKit 和 Chrome 22+ 上，position:fixed 始终会创建新的堆叠上下文，即使 z-index 为“auto”

来源：MDN：堆叠上下文

更新了 jsFiddle： http://jsfiddle.net/ncSWz/17/

超文本标记语言

    <section id="sidebar">
        
        <!-- Should be on top of the overlay -->
        <aside class="one">...</aside>
        
        <aside class="two">...</aside>
        
        <!-- Should cover all elements except for aside.one -->
        <div class="overlay"></div>
    </section>

CSS

header {
    z-index: 0;
}

...

.one {
    position: relative;
    width: 100%;
    z-index: 3;
}

.overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}