Question

我正在谈论＆＃34;幕布揭示＆＃34;通过将位置固定或绝对元素保留在底部并在其上方放置较高位置（z-index）元素来实现的效果。

像这样：http://cssdeck.com/labs/niasr9l8或https://www.thecssninja.com/demo/css_reveal/

这两种方法的问题在于它们只允许显示图像。滚动纯CSS 时，是否可以显示整个固定位置（顶部：0）HTML？谢谢！

另外，这是我目前的尝试以防万一（我希望不同的文字在滚动时保持静态，但在滚动时显示）：

＆＃13;

.section {
  height: 100vh;
  color: white;
  overflow: hidden;
}
.section .static-container {
  position: relative;
  top: 0;
  height: 100vh;
  width: 100%;
}
.section:nth-child(1) {
  z-index: 1;
}
.section:nth-child(1) .static-container {
  background-color: green;
}
.section:nth-child(2) {
  z-index: 2;
}
.section:nth-child(2) .static-container {
  background-color: blue;
}
.section:nth-child(3) {
  z-index: 3;
}
.section:nth-child(3) .static-container {
  background-color: red;
}
.section:nth-child(4) {
  z-index: 4;
}
.section:nth-child(4) .static-container {
  background-color: yellow;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Hello World</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Hello World</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h2>Lorem Ipsum</h2>
    </div>
  </div>
</section>

＆＃13;

Answer 1

我认为这应该有效：

    .section {
        height: 100vh;
        color: white;
        overflow: hidden;
    }
    .section .static-container {
        position: relative;
        top: 0;
        height: 100vh;
        width: 100%;
    }
    .section:nth-child(2) {
        z-index: 2;
    }
    .section:nth-child(2) .static-container {
        background-color: green;
    }
    .section:nth-child(3) {
        z-index: 3;
    }
    .section:nth-child(3) .static-container {
        background: none;
    }

    .section.behind {
        position: fixed;
        top: 0;
        z-index: 0;
        background-color: black;
        width: 100%;
    }

和

    <section class="section behind">
        <div class="static-container">
            <div class="container">
                <h1>I'm in the background</h1>
            </div>
        </div>
    </section>  

    <section class="section">
        <div class="static-container">
            <div class="container">
                <h1>Hello World</h1>
            </div>
        </div>
    </section>
    <section class="section">
        <div class="static-container">
            <div class="container">
            </div>
        </div>
    </section>

您需要两个未修复的剖面元素才能启用滚动。然后，固定元素位于后面，z索引为0。

滚动时是否可以显示固定的定位元素？

1 个答案: