html - 将标题文本保持在与背景容器相关的相同位置

Question

我在父容器内有一个 h1 标题，我希望无论屏幕宽度如何，h1 文本相对于父容器(即灰色背景的容器)始终处于相同位置。

当我减小窗口大小时，灰色的父容器不对齐，就好像它被向左拉的速度比文本向左移动的速度更快？

我很确定这是可能的，但试图找到一种方法让我有点发疯。

此外，我必须使用在父容器上给出的宽度计算，因为这里没有必要进入。

任何帮助都会很棒。

代码笔:https://codepen.io/emilychews/pen/NZoMbQ

或

下面的代码片段。

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  width: 100%;
}

.section {
  position: relative;
  display: flex;
  margin: 0 auto; 
  width: 100%;
  padding: 3.583rem 0;
  box-sizing: border-box;
  height: 100vh;
}

.left-background-box {
  height: 100%;
  background: lightblue;
  width: calc(10% + (27.133% - 1rem));
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-family: arial;
  font-size: 3rem;
  position: relative;
  left: 65%;
  margin: 1.728rem 0;
  line-height: 4.299rem;
  width: 30rem;
}

<section class="section">
    <div class="left-background-box">
        <h1 class="heading">This is a good two<br>
          Line Title to use
      </h1>
        <h3 class="subheading">Focused on the Issues That Affect You.</h3>
    </div>
</section>

Answer 1

.left-background-box 宽度变化率与 .heading 位置变化率不同的原因是基于百分比的宽度计算和静态值，另一个具有仅基于百分比的 left 属性值。

如果你必须为 .left-background-box 的宽度使用特定的 calc，你应该在 left 处使用它> .heading 也是如此。您也可以将其简化为 calc(37.133% - 1rem)。

唯一的区别是你需要做更多的计算来调整相同的速率，因为 .heading 嵌套在 .left-background-box 和百分比将考虑其父宽度。但是，如果您有一个全宽部分作为两者的父级，则可以通过使用 vw 而不是 % 来使用相同的值。也可以调整“static”值(这里是-1rem调整标题的对齐方式)

这是一个例子:codepen