问题场景

之前写一个通用弹出层组件，使用 transform 做弹出效果，在弹出层中有一个二级弹出层，这个二级弹出层使用的是 fixed 定位，期望效果是相对于页面定位，但是最终的效果是二级弹出层是相对于通用弹出层组件定位的。

导致问题的原因

MDN 中 position: fixed 的定义如下：

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。

由定义可知问题出现的原因是 fixed 定位元素（二级弹出层）的祖先中有 transform 不为 none 的元素（通用弹出层组件）。

调整弹出层组件后问题解决。

其他会导致 fixed 定位失效的属性

在 CSS 中，目前一共有 7 种方式可以让元素内部的 position: fixed 基于该元素定位：

1. transform 属性值不为 none 的元素；
2. 设置了 transform-style: preserve-3d 的元素；
3. perspective 值不为 none 的元素；
4. 在 will-change 中指定了任意 CSS 属性；
5. 设置了 contain: paint；
6. filter 值不为 none 的元素；
7. backdrop-filter 值不为 none 的元素。

演示

父元素设置transform

参考

position：fixed 固定定位失效问题（不是以可视窗口定位）

position - MDN

掘金小册-CSS 技术揭秘与实战通关-filter：CSS 中的三种滤镜模式及其特殊性介绍