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

birderic 发表于 Dev

鸟的

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

在某个时候，将显示一个覆盖图。我希望它涵盖除右列（<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结构才能使其正常工作，但是我不确定从哪里开始。

提前致谢。

Thgaskell

实际上，此问题涉及一些堆栈上下文。

这个想法本质上是，您需要同时具有.overlay和aside.one在相同的堆栈上下文中。您可以通过将移入来完成.overlay此操作#sidebar（因为它是position: fixed-这会创建一个堆栈上下文）。

接下来，您需要在侧边栏中创建更多嵌套的堆叠上下文。通过改变定位aside.one到relative和.overlay到fixed，创建另一个2个堆叠环境，让您玩z-index荷兰国际集团的元素。

最后，您需要更改z-index的位置#header，使其位于叠加层之下。

根元素（HTML），

使用“自动”以外的z索引值（绝对或相对）定位，

透明度值小于1的元素。

在移动版WebKit和Chrome 22+上，位置：固定始终会创建新的堆叠上下文，即使z-index为“自动”

来源：MDN：堆栈上下文

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

的HTML

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