父元素设置transform时嵌套fixed定位子元素位置异常问题求解

这是CSS规范明确规定的预期行为，不属于浏览器bug：当任意祖先元素的transform属性值不为none时，该元素会成为其内部所有position: fixed后代元素的定位包含块，此时后代fixed元素的位置会相对于该祖先元素计算，而非浏览器视口，视觉表现就和position: absolute一致。

父元素无transform时的正常表现 #

.parent {
  position: fixed;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 50px;
  left:50px;
}

.children {
  position: fixed;
  background-color: blue;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
}

<div class="parent">
  <div class="children"></div>
</div>

该场景下蓝色子元素固定在视口左上角(0,0)坐标，符合fixed定位的默认表现。

父元素设置transform后的异常表现 #

.parent {
  position: fixed;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 50px;
  left:50px;
}

.children {
  position: fixed;
  background-color: blue;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
}

.translate {
  transform: translate(10px, 0);
}

<div class="parent translate">
    <div class="children"></div>
</div>

该场景下蓝色子元素会定位在红色父元素的左上角，相对父元素偏移，不再相对视口定位。

在父元素必须保留transform属性的前提下，只有两类无兼容性问题的落地方案：

• 方案1：调整DOM层级（优先推荐）
  把需要相对视口做fixed定位的子元素移出带transform的父节点，改为和父元素平级的DOM结构，从根源上避免子元素被父元素创建的包含块捕获。修改后的结构参考：

  <!-- 保留transform属性的父元素 -->
  <div class="parent translate"></div>
  <!-- 原嵌套的fixed子元素改为平级 -->
  <div class="children"></div>
  

  这个方案兼容所有支持transform和fixed定位的浏览器，无额外性能开销，不需要写hack代码，是生产环境的首选方案。

• 方案2：JS动态计算定位（仅用于无法调整DOM的场景）
  如果业务逻辑强依赖原有嵌套DOM结构，无法调整层级，可以通过JS监听页面滚动、缩放、父元素transform变更等事件，手动计算子元素相对视口的目标位置，动态设置子元素的偏移值模拟fixed效果。
  这个方案需要处理的边界场景极多（比如父元素transform做动画、移动端软键盘弹出、页面缩放等），性能开销远高于原生fixed，非必要不选择。

注意：目前不存在纯CSS无副作用的hack方式，可以在不修改DOM的前提下突破这个规范限制，所有网上流传的相关hack都存在兼容性差、层级错乱、动画卡顿等问题，不建议在生产环境使用。

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