如何在改变窗口大小时控制元素位置以实现视差目的

Question

我正在处理一个视差页面，当它改变窗口大小（响应）时，保持元素的位置与我想要的完全一致，并且非常沮丧。我的所有元素都是文本，因此有点挑战，因此字体大小需要跟随定位。我不知道从哪个挑战开始，因为我一直在尝试使用vw和vh这样的视口单元而没有任何运气。

我附上了三张图片，说明了我想要实现的元素定位。我已经为元素添加了背景颜色来说明位置。我如何在我的元素上实现这种响应？

绝对位置是必须的，因此我需要在不依赖任何指令的情况下上下对齐元素。

小提琴：https://jsfiddle.net/440k02wg/1/

HTML

<section>
  <div class="header__1">
    A LOT OF TEXT
  </div>
  <div class="header__2">
    BIT MORE TEXT
  </div>
  <div class="header__3">
     SOME TEXT
  </div>
</section>

CSS

body, html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

.header__1 {
  font-size: 5vw;
  color: red;
  background-color: grey;
  top: 14vh;
}

.header__2 {
  top: 25vh;
  left: 4vw;
  font-size: 10vw;
  color: orange;
  background-color: white;
}

.header__3 {
  top: 48vh;
  left: 60vw;
  font-size: 5vw;
  color: blue;
  background-color: green;
}

Answer 1

position: absolute;对您来说至关重要吗？删除它会使问题变得更加简单，因为相对或静态定位的块元素始终坚持他们的兄弟姐妹。我已根据我的建议更新了您提供的示例（并进行了一些调整以使元素相应对齐）。

Fiddle

希望得到一些帮助：）