4

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

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

提前致谢。

4

2 回答 2

4

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

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

接下来，您需要在侧边栏中创建更多嵌套的堆叠上下文。通过更改aside.onetorelative和.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/

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;
}
于 2013-09-17T16:57:54.377 回答
1

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

Running Demo

添加代码

.one {
    position: absolute;
}

.two {
    position: absolute;
    top: 25px;
}
于 2013-09-17T16:48:23.313 回答