fixed定位的本质是元素完全脱离文档流且始终相对于视口定位；它不占空间、不随滚动移动，但受父级transform影响可能降级为relative行为。
fixed 定位的本质是什么
fixed 是 position 属性的一个取值，它让元素**完全脱离文档流**，并**始终相对于浏览器视口（viewport）定位**。这意味着：元素不占空间、不随页面滚动移动、也不受父元素样式（比如 transform）影响——除非父级用了 transform，此时 fixed 会“降级”为 relative 行为，这点要特别注意。
怎么写一个可用的 fixed 元素
只需两步：设 position: fixed，再指定至少一个方向偏移（top / right / bottom / left）。常见组合有：
-
顶部导航栏：
top: 0; left: 0; width: 100%; -
右下角悬浮按钮：
bottom: 20px; right: 20px; -
左侧固定侧边栏：
top: 0; left: 0; height: 100vh; width: 240px; -
全屏遮罩层：
top: 0; left: 0; width: 100vw; height: 100vh;
为什么内容被盖住了？怎么避免
fixed 元素不占空间，后续内容会“上移”填补空缺，结果就是被遮挡。解决方法是给主体内容预留对应空间：
- 顶部固定栏高 60px → 主内容加
margin-top: 60px - 左侧固定栏宽 240px → 主内容加
margin-left: 240px - 同时固定头和侧边栏 → 头部用
z-index: 1000，侧边栏用z-index: 990，主内容同时设置margin-top和margin-left
移动端和兼容性要注意什么
在 iOS Safari 中，输入框聚焦时 fixed 元素可能抖动或错位；部分安卓 WebView 对 fixed 支持不稳定。实用对策包括：
立即学习“前端免费学习笔记（深入）”；
- 给 body 或滚动容器加
-webkit-overflow-scrolling: touch; - 避免在 fixed 元素的任意祖先上使用
transform、perspective或filter - 旧版 IE6 不支持 fixed，如需兼容，可用 JavaScript 模拟（但现代项目通常无需考虑）
- 视口变化（如地址栏隐藏/弹出键盘）会影响实际可视区域，建议用
vh单位时配合 JS 动态调整
