动画过程中如何让子元素脱离父容器定位保持固定位置

你遇到的问题是CSS定位上下文规则导致的：当父元素存在以下任意一种属性时，内部的position: absolute、position: fixed子元素都会以该父元素作为定位基准，无法脱离父元素移动的影响：

• 显式设置了position: relative/sticky/fixed
• 设置了transform/perspective/filter属性（如果你实现滑动效果用的是transform: translateX，就会触发这个规则）

方案1：不修改现有HTML结构 #

调整滑动实现逻辑和父元素属性即可：

1. 删除父元素.background-block上的position: relative属性，保持默认的position: static定位，不让它成为定位上下文
2. 把原来用transform实现的滑动效果，改成修改父元素的margin-left/left属性实现，同时保留滑动动画的过渡效果
   示例代码：

.background-block {
  transition: margin-left 0.3s ease;
  /* 删掉原有transform、position: relative相关代码 */
}

h2 {
  position: absolute;
  left: 1em;
  z-index: 99; /* 保证文字显示在色块上层 */
}

触发滑动时，把原来给父元素加transform: translateX(xxx)的逻辑，改成修改margin-left: xxx即可。

如果必须用transform实现父元素滑动且不想改结构，也可以给h2设置和父元素反向的位移抵消移动效果，不过需要保证两者动画完全同步，容错率较低，示例：

/* 父元素向右滑动200px时，给h2加对应反向位移 */
h2 {
  transform: translateX(-200px);
  transition: transform 0.3s ease;
}

方案2：调整HTML结构（更稳妥，长期维护成本更低） #

把h2从div容器中提取出来，和容器变为同级元素，两者的定位完全独立互不影响：
修改后HTML结构：

<h2>
  <!-- 该内容由jQuery动态生成 -->
</h2>
<div id="red" class="background-block">
</div>

对应CSS：

h2 {
  position: absolute;
  left: 1em;
  z-index: 99;
}

/* 原有.background-block的滑动逻辑不需要修改，不管用transform还是left实现都不会影响h2的位置 */

内容的提问来源于stack exchange，提问作者brazilla_ray