html - 为什么带有背景颜色的div在下面显示固定元素？

Question

我正在尝试使用带有 position: fixed 的 div 创建一些静态内容，然后允许带有 的固定 div >background-color 在它上面滚动并隐藏下面的静态文本。

HTML:

<div class="container">
    <div class="static-background">
        <p>Why can I see this through the yellow div?</p>
        <p> <a href="#">this should be clickable</a>

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

CSS:

.container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.static-background {
    position: fixed;
}
.overlay {
    background-color: yellow;
    height: 200%;
    margin-top: 200px;
}

但是黄色的 div 只是从固定的背景中显示文本。

这是为什么？

通过在 .static-background 中设置 z-index: -1; 我得到了想要的行为，除了链接是 no可点击时间更长，文本不可选择。

如何让 .overlay 的背景隐藏后面的固定元素，同时仍然允许交互(直到隐藏)？

Fiddle here .

.container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.static-background {
  position: fixed;
}
.overlay {
  background-color: yellow;
  height: 200%;
  margin-top: 200px;
}

<div class="container">
  <div class="static-background">
    <p>Why can I see this through the yellow div?</p>
    <p> <a href="#">this should be clickable</a>

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

Answer 1

当你给元素 .static-background 一个负的 z-index 时，它被放置在父 .container 元素的后面，这就是元素不可点击的原因。

要解决这个问题，您需要为父元素 .container 提供一个 z-index 到 establish a stacking context元素之间。

在这种情况下，您可以简单地为它指定 1 的 z-index。

Updated Example

.container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;      /* Added */
}

.container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.static-background {
    position: fixed;
    z-index: -1;
}
.overlay {
    background-color: yellow;
    height: 200%;
    margin-top: 200px;
}

<div class="container">
    <div class="static-background">
        <p>Some text</p>
        <p><a href="#">this should be clickable</a></p>
    </div>
    <div class="overlay"></div>
</div>

作为替代方案，您也可以只为元素 .overlay 指定 1 的 z-index，然后删除 来自其他元素的 z-index。 (example)