position: fixed 无法相对于父容器定位，因其规范强制包含块为视口；当祖先元素设置 transform/filter/perspective 等属性时，fixed 会降级为相对该祖先定位，此时应改用 position: absolute + relative 父容器或 position: sticky。
不能直接让 position: fixed 相对于父容器定位——这是 CSS 规范禁止的行为，不是写法不对，而是它根本没这个能力。
为什么 position: fixed 有时看起来“绑”在父容器上？
这不是你实现了“相对父级 fixed”，而是父容器触发了新 containing block：只要某个祖先元素设置了以下任一属性，position: fixed 就会降级为相对于该祖先定位（而非视口）：
-
transform值不为none（包括translateZ(0)、scale(1)等“无感”写法） -
filter值不为none（哪怕blur(0)或opacity(0.99)） -
perspective、will-change: transform、backdrop-filter - iOS Safari 中的
-webkit-overflow-scrolling: touch
此时 DevTools 的 Computed 面板里，“Containing Block”会显示为那个 div，而不是 “Viewport”。这不是 bug，是规范明确要求的行为。
真正想“在父容器内固定”，该用 position: absolute
这是最轻量、可靠、无需 JS 的解法。关键点在于定位上下文必须显式建立：
- 父容器必须设置
position: relative（或absolute/sticky），否则absolute子元素会上溯到html - 子元素设
position: absolute，再用top/right等定位到目标位置 - 如果父容器本身可滚动（如
overflow-y: auto），需确保其有明确height或max-height，否则滚动不会生效 - 注意：不要用
margin模拟定位——它不脱离文档流，无法实现“悬浮”效果
需要“滚动时吸附”效果？优先选 position: sticky
它专为这类场景设计：在父容器滚动范围内保持固定，超出后恢复文档流位置。行为干净，且完全不受 transform/filter 干扰：
- 父容器不能创建新 containing block（即不能有上面列出的那些属性）
- 子元素设
position: sticky+top: 0（或bottom、left、right） - 现代浏览器全覆盖（Chrome 56+、Firefox 59+、Safari 15.4+、iOS Safari 15.4+）
- 比 JS 方案更稳定——软键盘弹出、横竖屏切换时不会错位
别在移动端硬扛 position: fixed
iOS Safari 和部分 Android WebView 中，position: fixed 在软键盘唤起、地址栏变化、页面缩放时极易失效。即使样式正确，也可能临时“掉下来”或卡住：
- 检查
是否包含maximum-scale=1.0和minimum-scale=1.0；仅user-scalable=no不够 - 避免在微信 X5 内核中依赖
fixed做关键浮层——聚焦 input 后常被顶起 - 真机测试不可跳过：缩放 + 键盘 + 横竖屏三者叠加，才是
fixed最容易暴雷的组合
真正难处理的，从来不是怎么写 CSS，而是怎么判断当前 fixed 元素的 containing block 到底是谁——打开 DevTools 看 Computed 面板里的 “Containing Block” 字段，比猜更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
