html - 部分绝对位于彼此之上

Question

我有部分包裹在 div 中。我希望每个部分都是窗口的高度并且一个接一个地坐在页面上，我已经在 div 中实现了这一点。但目前流程 div 位于文章 div 上，我希望流程 div 继续相同的流程，以便在文章 div 的最后一部分之后我们看到流程 div 的第一部分。

这是 HTML:

    .window {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    
    .window:nth-child(1) {
      top: 0%;
    }
    
    .window:nth-child(2) {
      top: 100%;
    }
    
    .window:nth-child(3) {
      top: 200%;
    }

<div class="articles">
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>
    <div class="process">
         <section class="window">
         </section>
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>

Answer 1

你正在使用 position: absolute 即为什么它表现得很奇怪，而不是像下面的代码片段那样改变你的 CSS。

此处 vh 是 vh:1/100th viewport height 或 窗口高度的百分比。

代码片段

.window {
  width: 100%;
  height: 100vh;
  position: relative;
}

.window:nth-child(1) {
  background: red;
}

.window:nth-child(2) {
  background: green;
}

.window:nth-child(3) {
  background: blue;
}

<div class="articles">
  <section class="window">articles 1
  </section>
  <section class="window">articles 2
  </section>
</div>
<div class="process">
  <section class="window">process 1
  </section>
  <section class="window">process 2
  </section>
  <section class="window">process 3
  </section>
</div>