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移动到#sidebar（因为它是position: fixed - 这会创建堆叠上下文）来实现这一目标。

接下来，您需要在侧边栏内创建几个更多嵌套的堆叠上下文。通过将aside.one上的定位更改为relative和.overlay更改为fixed，您可以创建另外2个堆叠上下文，以便您可以使用z-index元素

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

根元素（HTML），

定位（绝对或相对）z-index值不是“auto”，

具有opacity value less than 1.
的元素
在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index是“auto”

来源：MDN：The stacking context

更新了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;
}

Answer 2

将position: absolute放在one和two上，并设置two的顶部;由于他们的父母是固定的，他们绝对定位于它。

Running Demo

已添加代码

.one {
    position: absolute;
}

.two {
    position: absolute;
    top: 25px;
}

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

2 个答案:

HTML

CSS