为视差目的更改 window 大小时如何控制元素位置

Question

我正在处理一个视差页面，当 window 大小更改（响应）时，要保持元素的位置完全符合我的要求，我感到非常沮丧。我所有的元素都是文本，因此有点挑战性，因此字体大小需要与定位保持一致。我不知道从哪里开始这个挑战，因为我一直在尝试 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; 对您来说至关重要吗？删除它会使问题变得简单得多，因为相对或静态定位的块元素总是坚持它们的兄弟姐妹。我已经根据我的建议更新了您提供的示例（并进行了一些调整以使元素相应对齐）。

Fiddle

希望对您有所帮助:)

为视差目的更改 window 大小时如何控制元素位置

How to control element position when changing window size for parallax purpose

javascript

jquery

html

css

parallax