html - CSS 定位 : Content that should be below the fold is appearing above the fold

Question

我正在尝试构建一个分为首屏和非首屏部分的页面，让查看者有一种进入海底的印象。我遇到了一个绊脚石，因为当涉及到 CSS 定位的概念时，我的脑子里有些东西就是拒绝点击。

最终，我试图在折叠下方添加另一个部分，我可以在其中添加内容，但希望上面的水场景保持全宽。目前，我想要显示在首屏下方的内容正在首屏部分呈现。

body {
  background: #90caf9;
}

.above-water {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.wave {
  position: absolute;
  width: 100%;
  height: 220px;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle farthest-corner at 50% 0%, transparent 30%, #2179ea 30%, #2179ea 45%, #1d86ea 45%, #1d86ea 60%, #2a9eea 60%, #2a9eea 75%, #02b0ea 75%);
  -webkit-animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
  -moz-animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
  animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@-webkit-keyframes anim-h-wave {
  0% {
    background-position: -100px 0;
  }
  100% {
    background-position: 100px 0;
  }
}

@keyframes anim-h-wave {
  0% {
    background-position: -100px 0;
  }
  100% {
    background-position: 100px 0;
  }
}

@-webkit-keyframes anim-v-wave {
  0% {
    background-size: 100px 220px;
  }
  100% {
    background-size: 100px 270px;
  }
}

@keyframes anim-v-wave {
  0% {
    background-size: 100px 220px;
  }
  100% {
    background-size: 100px 270px;
  }
}

<section id="above-the-water">
  <div class="above-water">
    <div class="wave"></div>
  </div>
</section>

<section id="underwater">
  <div class="container">
    <h1>test</h1>
  </div>
</section>

如果需要，可以在我的笔上找到完整代码 https://codepen.io/sabey-dc/pen/zYOdNOv

Answer 1

您必须将 margin-top: 100vh 添加到水下部分，因为由于上面的水具有绝对定位，它不会自行将水下内容向下推。