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 元素完全腾空，下面内容会自动上移填补

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，结果毫无反应

我滚动到顶部时会吸住

真正卡住开发的，往往不是记不住五个值，而是没意识到：relative 必须先“立旗”，absolute 才能“认旗”；fixed 的坐标系永远不变，但 viewport 可能被缩放或裁剪；sticky 看似聪明，实则对 DOM 结构和 CSS 环境极其敏感。写之前，先问一句：这个元素到底该“跟着谁动”，答案就藏在这五个值的选择里。