position: fixed 元素完全脱离文档流，不占据空间、不参与父容器高度计算、不影响后续布局；其宽高以视口为基准，默认由内容撑开，设left/right或top/bottom时自动计算，设width/height则优先采用该值。
fixed定位确实会让元素完全脱离文档流
是的，position: fixed 会把元素从标准流中抽离，它不再占据空间、不参与父容器高度计算、不影响后续兄弟元素布局。这不是 bug，而是规范行为——浏览器直接把它挂载到视口图层，和文档流解耦。
常见错误现象包括：父容器高度塌陷为0、下面的内容向上“顶”进fixed元素下方、背景色或边框消失。这些都不是样式写错了，而是你忘了它已经“不在场”了。
fixed元素的宽高怎么算？跟父容器无关
position: fixed 元素的包含块是视口（viewport），不是父元素。所以它的 width 和 height 不继承、不受限于任何祖先的 padding/margin/border。
- 没设
width时，默认由内容撑开（width: auto） - 同时设
left和right，且没写width→ 浏览器自动算出width: calc(100vw - left - right) - 同时设
top和bottom，且没写height→ 同理推导height - 写了
width: 200px又写了left和right→right被忽略，width优先
为什么fixed元素“错位”或“跳动”？参考系被悄悄改了
position: fixed 的锚点本该是视口，但某些 CSS 属性会意外创建新的包含块，让它退化成“相对某个父容器定位”：
立即学习“前端免费学习笔记（深入）”；
-
transform、perspective、filter、opacity（小于1）作用在html或body上，会创建新包含块 - 在 iOS Safari 中，地址栏收起/展开时
100vh和100vw会动态变化，导致 fixed 元素“跳” - iframe 内部的 fixed 元素，可能以 iframe 视口为参考，而非顶层窗口
排查方法：在 Chrome DevTools 的 Elements 面板里，临时给 html 和 body 加 outline: 1px solid red，看 fixed 元素是否还对齐屏幕边缘。
fixed之后，怎么让下面的内容不往上跑？
不能指望父容器“感知”fixed子元素，得主动占位。最稳妥的做法是：在 fixed 元素对应位置的下一个兄弟容器上加 padding-top（导航栏）或 padding-bottom（底部栏），值等于 fixed 元素的高度。
- 别用
margin-top—— 如果那个兄弟容器本身是display: flex或grid，margin 可能失效 - 别依赖
height或min-height硬设 —— 响应式下高度可能变，比如文字换行、字号缩放 - 移动端要额外考虑软键盘弹出时视口高度收缩，
vh不可靠，建议用 JS 监听resize动态修正
真正难的不是加 padding，而是判断：这个 fixed 元素是否真的必须脱离流？有时候用 position: sticky 或 flex + margin 更干净，也更可控。
