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

【问题标题】：Display fixed position element's child above absolutely positioned overlay在绝对定位叠加层上方显示固定位置元素的子元素
【发布时间】：2013-09-17 16:10:52
【问题描述】：

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

在某些时候，会显示一个叠加层。我希望它涵盖除右栏中第一部分 (<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 结构才能使其正常工作，但我不确定从哪里开始。

提前致谢。

【问题讨论】：

IE 支持对您来说有多重要？
它支持的版本越多越好，但实际上只需要支持所有主流浏览器的最新版本即可。
耻辱。如果将pointer-events:none; 添加到覆盖规则中，则可以让点击直接通过 div。不幸的是，这在任何 IE 中都不起作用（据说 IE11 除外）。 jsfiddle.net/j08691/ncSWz/11
叠加层应该阻止它下面的所有内容，并且只允许与它上面的元素交互。

标签： html css

【解决方案1】：

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

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

接下来，您需要在侧边栏中创建更多嵌套的堆叠上下文。通过将aside.one 上的位置更改为relative 并将.overlay 上的位置更改为fixed，您可以创建另外2 个堆叠上下文，允许您使用z-indexing 元素。

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

根元素 (HTML)，

使用除“auto”以外的 z-index 值（绝对或相对）定位，

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

【讨论】：

【解决方案2】：

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

Running Demo

添加代码

.one {
    position: absolute;
}

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

【讨论】：