CSS将完整大小的div排列在彼此之下

Question

请考虑以下插图：

DIV ONE占据整个屏幕，在滚动时可以查看DIV FIVE。然而，在点击之后，DIV TWO / THREE / FOUR从左向右滑动占据屏幕的50％。

到目前为止，我的CSS看起来像是：

lastSpanNode.nodeValue

使用这种造型，DIV ONE，TWO，THREE和FOUR正确渲染。但是，div DIVE在DIV ONE上重叠。我怎样才能解决这个问题？

当前结果在按钮点击之前呈现如下：

我的HTML（它的React代码，抱歉）：

.div-one {
  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: fixed;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;
  display: block;
}
.div-two {
  position: fixed;
  width: 50%;
  height: 100vh;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div2 0.2s forwards;
  animation: left-to-right-div2 0.2s forwards;
}
.div-three {
  position: fixed;
  width: 50%;
  height: 100vh;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}
.div-four {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}

.div-five{
  position: relative;
  min-height: 250px;
  min-height: 50vh;
  background-color: brown;
  display: block;

}