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

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;]。试试看是否可行。

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

fixed position for child elements during animation

html

css

css-position