position: fixed元素未按预期定位在屏幕左上角的原因咨询

• 当position: fixed的子元素，其任一父级元素存在**transform、perspective、filter属性且值不为none，或者父级设置了will-change: transform/perspective/filter时，子元素的定位基准会从全局视口切换为该父级元素的边框盒**，不再遵循fixed原本的视口定位逻辑。

在你的场景中：

1. 父容器.container设置了top:400px，本身处于屏幕中下部位置；
2. 虽然你提供的代码片段里父容器没有上述触发属性，但实际项目中大概率存在其他CSS规则（比如动画类、框架默认样式、视觉效果代码）给.container添加了这类属性，导致子元素的fixed定位相对于父容器而非视口；
3. 当你把子元素top:0; left:0时，它会定位在父容器的左上角，而父容器本身在屏幕中下部，最终就出现了你看到的偏离效果。

补充：仅父容器设置position: fixed本身不会改变子元素的fixed定位基准，必须配合上述触发属性才会引发这个问题。

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