fixed元素的包含块是视口而非父容器，其宽高、定位均基于视口计算，不受父元素padding/margin/border影响；left/right/top/bottom始终相对于视口边缘，width:100%等价于100vw，需配合left/right或box-sizing:border-box避免溢出。
fixed元素的包含块是视口，不是父容器
position: fixed 的规范行为就是让元素脱离文档流，并以 viewport 为包含块（containing block）。这意味着它的 width、height、top、right 等所有偏移和尺寸计算，都基于视口边界，而不是父元素的 padding-box 或 border-box。哪怕父容器写了 width: 300px、padding: 20px，对 fixed 子元素也完全无效。
left/right/top/bottom 的参考系被重置了
当你写 left: 20px，它永远是“距离视口左边缘 20px”，不是“距离父容器左内边距 20px”。常见误判是给父容器加了 padding 或 transform，就以为 fixed 元素会跟着偏移——其实不会。除非父级触发了新的包含块（比如 transform、filter 作用在 html 或 body 上），否则 fixed 元素根本不“看”父级一眼。
- 错误写法：
.parent { padding: 20px; } .child { position: fixed; left: 0; }→ 元素仍紧贴屏幕左边，不是父容器内容区左边 - 正确写法：
.child { position: fixed; left: 20px; }（显式设偏移）或.child { position: fixed; inset: 0; }（现代语法，等价于top: 0; right: 0; bottom: 0; left: 0;） - 注意：
inset是 shorthand，但 Safari 15.4+ 才稳定支持，老版本需回退到四值写法
width: 100% 在 fixed 下实际等于 100vw，不是父宽
这是最易踩坑的一点：fixed 元素的百分比宽度，始终相对于视口宽度计算，而非父容器。而 100vw 在 iOS Safari 中包含滚动条预留宽度（约 15px），导致 width: 100vw + padding: 16px 必然溢出。
- 别用
width: 100%或width: 100vw配合padding/border—— 默认box-sizing: content-box下，总宽 = 内容宽 + 左右 padding + 左右 border - 推荐方案：
left: 0; right: 0;（自动拉伸，不依赖 vw） +box-sizing: border-box - 若需留边：
left: 16px; right: 16px;，比width: calc(100% - 32px)更可靠，因百分比基于视口，不受滚动条干扰
父容器高度塌陷，是因为 fixed 元素根本不在布局树里
你看到父 div 高度为 0，不是 CSS 没生效，而是浏览器渲染引擎压根没把 fixed 元素纳入父容器的高度计算路径。它被提升到了视口图层，和文档流完全解耦。
立即学习“前端免费学习笔记（深入）”；
- 视觉上“盖住”下面内容？不是 z-index 太高，是它物理上就不占位 —— 解决办法是在下一个兄弟元素上加
padding-bottom，值等于 fixed 元素的视觉高度 - 想让 fixed 导航栏不遮挡正文？别指望父容器“撑开”，直接给
body加padding-top，且该值必须是固定像素或 JS 动态读取（因为vh在移动端键盘弹出时会跳变） - 伪元素占位（如
::before）只适用于静态高度场景；一旦 fixed 元素响应式缩放或文字换行，就失效
真正容易被忽略的是：fixed 的盒模型行为本身没问题，问题出在你还在用“父-子”思维去理解它。它不是子元素，它是视口的直属挂件。
