动画期间子元素的固定位置

Question

我正在处理这个codepen，并且有点卡在元素的位置上。 本质上，我有一个div 和一个内部h2。实际上，当单击时，外部div 会向右滑动，同时带有h2。但是，我希望h2 保持在原来的位置。我原以为position: absolute 或fixed 会这样做，但它仍会随其父容器一起移动。

有没有办法将子元素与其父容器分开以进行定位，还是我需要重新考虑 HTML？

h2 {
  position: absolute;
  left: 1em;
}

<div id="red" class="background-block">
  <h2>
    <!-- this content is provided by jQuery -->
  </h2>
</div>

Answer 1

尝试将父元素设置为position: relative;，将子元素设置为position: fixed; 或[position: absolute;，其他定位为top: 50px; left: 0;]。试试看是否可行。