position: Static 是默认值，按文档流布局且忽略 top/right/bottom/left/z-index；relative 偏移不脱离文档流，原占位保留；absolute 脱离文档流，相对于最近非 static 祖先定位；fixed 相对视口固定；sticky 是条件性固定。
position: static 是默认值，但不是“没效果”
很多人以为 static 就是“不参与定位”，其实它明确参与——只是按正常文档流布局，且忽略 top、right、bottom、left 和 z-index。一旦你写了 position: static; 又同时设了 top: 20px，那这个 top 完全被浏览器无视。
- 常见错误现象：
div加了position: static; top: 10px;却没动，以为 css 失效了 - 使用场景：极少主动写，多见于重置样式（比如清除第三方库的
relative影响） - 性能影响：
static元素不会触发层叠上下文，也不会让浏览器额外计算定位，是最轻量的取值
position: relative 的偏移不脱离文档流
relative 是最常被误用的定位方式——它让元素“在原位置基础上挪动”，但原来占的地方还在，不影响其他元素布局。这点和 absolute 有本质区别。
- 常见错误现象：给按钮加了
position: relative; top: -5px;，结果下面的文字没上移，以为“没生效”，其实是它自己上去了，底下的空间还留着 - 参数差异：
top/left等值是相对于自身原始位置计算的，不是父容器边界 - 容易踩的坑：滥用
relative做“微调”会导致后续维护困难；如果只是为了对齐，优先考虑margin或transform: translateY()
position: absolute 脱离文档流，找的是最近的定位祖先
absolute 元素会完全脱离文档流，不再占据空间，它的定位参考点不是父元素，而是“最近的 position 值不为 static 的祖先元素”。如果找不到，就回退到初始包含块（通常是视口）。
- 常见错误现象：
div设了position: absolute; left: 0;，却飞到页面左上角，因为它的所有父级都是static，最终以body或视口为参考 - 使用场景：下拉菜单、气泡提示、模态框遮罩层等需要精确控制坐标的位置
- 兼容性注意：IE6–7 对“最近定位祖先”的判断有 bug，有时会错误采用
body；现代浏览器无此问题 - 性能提示：频繁改变
absolute元素的top/left会触发重排，动画建议改用transform
position: fixed 和 sticky 都依赖视口，但行为完全不同
fixed 相对于视口固定，滚动也不变；sticky 则是“条件性固定”：在滚动到某个阈值前是 relative，过了才变成 fixed。两者都不受父容器 overflow 影响（除非父级设了 transform 或 will-change，这会创建新的包含块）。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：
position: sticky; top: 0;不生效——大概率是父容器没设高度，或父级有overflow: hidden（老版本 safari 会受影响） - 使用场景：
fixed适合全局导航栏、返回顶部按钮；sticky更适合表格表头、侧边栏目录锚点 - 兼容性提醒：
sticky在 ios Safari 15.4+ 和 android chrome 56+ 才稳定支持；fixed虽然支持广，但在 iOS 微信内置浏览器中可能触发输入框聚焦时的定位错乱
真正难的不是记住五个值，而是每次写 position 时，脑子里得过一遍：这个元素要不要占位？参考谁？会不会随滚动跑掉？浏览器版本够不够？这些细节一漏，调试时间就翻倍。