CSS transform导致元素成为absolute子元素定位参考，如何规避该影响？

首先这是CSS标准明确规定的行为：只要元素的transform属性值不为none，就会自动创建新的定位上下文，其内部的绝对定位、固定定位元素都会默认以该元素作为包含块进行定位，该行为没有内置开关可以直接关闭，只能通过以下变通方案实现需求：

方案1：调整DOM结构，将需绝对定位的子元素移出transform元素 #

如果业务逻辑允许，直接把需要脱离transform元素定位的子元素从transform元素内部挪到外部，和transform元素平级后，统一用你期望的定位参考元素作为父级包裹即可。
示例调整后的代码如下：

<!-- 你想要作为定位基准的父容器 -->
<div class="relative wrapper">
  <div class="translate container">
    This is a transformed container
  </div>
  <!-- 子元素和transform容器平级，不受transform影响 -->
  <div class="absolute child">
    This is an absolutely positioned element, now positioned relative to the wrapper
  </div>
</div>

方案2：transform仅作用于内容层，定位子元素和内容层平级 #

如果无法直接将子元素移出transform元素，可以在容器内部新增一层纯内容容器，把transform属性仅加在内容层上，需要绝对定位的子元素和内容层平级放置：

<div class="container">
  <!-- transform只作用在内容层 -->
  <div class="translate content">
    This is a transformed container
  </div>
  <!-- 定位子元素和内容层平级，不受transform影响 -->
  <div class="absolute child">
    This is an absolutely positioned element
  </div>
</div>

方案3：fixed定位子元素兼容方案（仅特定场景适用） #

如果子元素用的是position: fixed定位，可以尝试给子元素额外添加transform: none属性，该方案仅在transform父元素未设置perspective、will-change: transform属性的场景下生效，兼容性一般，更推荐使用前两种结构调整的方案。

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