javascript - 为视差目的更改窗口大小时如何控制元素位置

Question

我正在处理一个视差页面，当它归结为在更改窗口大小(响应)时保持元素位置完全符合我的要求时，我感到非常沮丧。我所有的元素都是文本，因此有点挑战性，因此字体大小需要与定位保持一致。我不知道从哪里开始这个挑战，因为我一直在试验视口(viewport)单元，例如 vw 和 vh 但没有任何运气。

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

绝对位置是必须的，因此我需要在不独立于任何顺序的情况下上下视差元素。

fiddle :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; 对您来说至关重要吗？删除它会使问题变得简单得多，因为相对或静态定位的 block 元素总是坚持它们的 sibling 。我已经根据我的建议更新了您提供的示例(并进行了一些调整以使元素相应地对齐)。

Fiddle

希望对你有帮助:)