Question

我正在尝试使用带有div的{{1}}创建一些静态内容，然后允许带有position: fixed的实体div滚动它并隐藏静态内容下面的文字。

HTML：

background-color

CSS：

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

但是黄色.container { position: absolute; top: 0; width: 100%; height: 100%; } .static-background { position: fixed; } .overlay { background-color: yellow; height: 200%; margin-top: 200px; }只显示固定背景中的文字。

为什么会这样？

通过在div中设置z-index: -1;，我得到了所需的行为，除了，该链接不再可以点击且文字无法选择。

如何让.static-background的背景隐藏固定元素，同时仍允许互动（直到隐藏）？

Fiddle here

.overlay

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

Answer 1

当您为元素.static-background提供否定z-index时，它会被放置在父.container元素后面，这就是元素无法点击的原因。

要在此工作，您需要在元素之间为父元素.container提供z-index到establish a stacking context。

在这种情况下，您只需给它z-index 1。

Updated Example

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

＆＃13;

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

＆＃13;

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

＆＃13;

作为替代方案，您也可以只为.overlay元素z-index提供1，并从其他元素中删除z-index。 (example)

Answer 2

您可能想要为元素添加一些z-index：

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

Answer 3

将您的CSS更改为此...

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

使用JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/

为什么带背景色的div显示下面的固定元素？

3 个答案: