CSS 定位：应该在首屏以下的内容出现在首屏以上

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 因为上面的水有绝对定位，它不会自己把水下的内容推下去。

CSS 定位：应该在首屏以下的内容出现在首屏以上

CSS Positioning: Content that should be below the fold is appearing above the fold

html

css

css-position