如何防止添加transform的定位元素被纳入文档流？

为position: absolute元素添加transform属性，不会导致元素重新纳入普通文档流。你观察到的容器异常滚动现象和文档流无关，是CSS溢出计算规则触发的结果。

异常滚动的触发逻辑：

• 蓝色div为绝对定位元素，其父级红色div默认overflow属性值为visible，不会裁剪超出自身边界的子元素
• 蓝色div设置非none值的transform属性后，会创建独立层叠上下文，它向下偏移100%自身高度、溢出红色div边界的部分，会直接暴露给外层的黄色滚动容器
• 黄色容器设置了overflow-y: scroll，会将所有可见的溢出内容纳入可滚动区域计算范围，因此出现了多余滚动条，视觉上类似蓝色div挤占了文档流空间，但实际上蓝色div始终脱离文档流，不会对其他普通流元素的布局位置产生任何影响。

给蓝色div的直接定位父级（红色div）添加overflow: hidden属性，裁剪蓝色div超出红色div边界的部分，外层黄色容器就不会再将这部分溢出内容纳入滚动计算，多余滚动条会直接消失。
核心修复代码如下：

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
  overflow: hidden; /* 新增溢出裁剪规则 */
}

原有HTML结构无需调整。后续为蓝色div添加过渡动画时，只需要修改--tw-translate-y变量值从100%到0，即可实现蓝色div从红色div下方滑入覆盖的效果，动画全程不会触发容器滚动，也不会干扰其他元素布局。

内容的提问来源于stack exchange，提问作者Daniel Turuș