static 表示无定位，元素遵循文档流且 top/left/z-index 无效；relative 为子元素提供定位锚点但仍占位；absolute 脱离文档流并相对于最近已定位祖先定位；fixed 相对于视口固定；sticky 则根据滚动位置在 relative 和 fixed 间智能切换。
static 是“没定位”，不是“静态定位”
很多人误以为 static 是一种主动选择的定位方式，其实它只是“没开启定位”——浏览器按 HTML 顺序自然排布元素，完全遵循文档流。一旦设为 position: static（或干脆不写），top、left、z-index 全部失效，连设了也白设。
- 它不脱离文档流，也不占额外层叠上下文
- 所有块级元素照常换行、撑高父容器，内联元素照常同行排列
- 实际开发中几乎不用显式写
position: static，写了反而可能掩盖你本想用 relative/absolute 的意图
relative 和 absolute 必须“父子配合”，否则容易错位
relative 本身不改变布局，只是给子元素提供一个“可信赖的定位锚点”；而 absolute 一旦启用，就会立刻脱离文档流，并向上查找**最近的已定位父元素**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）作为参照系。如果找不到，就直接相对于 （即整个页面）定位——这正是很多“明明写了 top: 0 却飞到页面顶部外”的根本原因。
- 常见错误：父容器只设了宽高，却忘了加
position: relative - 正确做法：只要你想让子元素用
absolute相对它定位，父元素必须显式设置非static的position - relative 元素自身仍占位，移动后原位置空着；absolute 元素完全腾空，下面内容会自动上移填补
<style>
.parent { position: relative; width: 300px; height: 200px; background: #eee; }
.child { position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; background: red; }
</style>
<div class="parent"><div class="child"></div></div>
fixed 定位基准永远是视口，和滚动无关
fixed 的行为非常确定：它的 top、left 等偏移值，永远以浏览器可视窗口（viewport）左上角为原点计算。页面滚动时，它纹丝不动——这是实现悬浮导航栏、返回顶部按钮、全局提示框的核心依据。
- 它自动脱离文档流，不影响其他元素布局
- 注意：在 iOS Safari 中，
fixed在某些 meta viewport 设置下可能表现异常（如缩放后错位），需搭配viewport配置或降级为sticky - 慎用
z-index过高值，避免遮挡用户操作区域（比如误盖住输入框）
sticky 是 relative 和 fixed 的“智能切换”，但兼容性要查清
sticky 不是简单“吸顶”，而是根据滚动位置动态切换行为：未到达阈值时像 relative，到达后像 fixed。但它依赖父容器有明确高度和滚动范围，且必须指定 top（或 bottom）才生效。
立即学习“前端免费学习笔记（深入）”；
- 不支持 IE，Android 4.4–6.0 也基本不可用，上线前务必检查目标用户环境
- 父容器不能是
overflow: hidden或transform非 none，否则 sticky 失效 - 常见误用：只写
position: sticky却漏掉top: 0，结果毫无反应
<style>
.sticky-header { position: -webkit-sticky; position: sticky; top: 0; background: #333; color: white; }
</style>
<header class="sticky-header">我滚动到顶部时会吸住</header>
真正卡住开发的，往往不是记不住五个值，而是没意识到：relative 必须先“立旗”，absolute 才能“认旗”；fixed 的坐标系永远不变，但 viewport 可能被缩放或裁剪；sticky 看似聪明，实则对 DOM 结构和 CSS 环境极其敏感。写之前，先问一句：这个元素到底该“跟着谁动”，答案就藏在这五个值的选择里。 
