position

五个值的核心差异：会不会脱离文档流、参照谁定位、适合什么场景。下面先看对照表，再逐个看效果。

五个值对比

值	是否脱离文档流	定位参照	常见场景
`static`	否（默认）	无，top/left 等无效	正常排版，一般不用特意写
`relative`	否，原位置还占着	相对自己原来的位置偏移	微调位置；给绝对定位当「爸爸」参照
`absolute`	是	最近的非 static 祖先；没有就相对页面	弹层、角标、相对某个盒子精确定位
`fixed`	是	相对浏览器视口	吸顶导航、回到顶部、固定侧栏
`sticky`	滚动前像 relative，吸住后像 fixed	相对最近的滚动容器	表头吸顶、侧栏滚到一定位置钉住

1. static（默认）

正常文档流排版。top / left / right / bottom / z-index 都无效。

B · static + top/left 无效

B 写了 top/left 也不会动，三个盒子依次排列。

2. relative

相对自己原来的位置偏移；视觉上挪走了，但文档流里的占位还在，所以 C 不会贴到 A 旁边。

B 的文档流占位

B · relative
top: 36px; left: 40px

虚线框是 B 仍占用的流内空间；黄色块只是相对这个位置做了偏移，C 的位置不变。

3. absolute

脱离文档流，相对最近的非 static 祖先定位。常见：父级 relative + 子级角标。

父级 position: relative角标

后面的文字会顶上来（角标已脱离文档流）。

没有非 static 祖先时，会相对初始包含块（通常是页面）定位。

4. fixed

相对浏览器视口（viewport）定位，不跟着页面内容滚走。请滚动整页：右下角绿色按钮应始终钉在屏幕右下角。

常见场景：吸顶导航、回到顶部、固定客服入口。注意：祖先若有 transform / filter 等，fixed 可能被“降级”成相对该祖先定位；本页演示按钮用 Teleport 挂到 body，避免踩坑。

↓ 继续向下滚动整页看 fixed（1/6）↓ 继续向下滚动整页看 fixed（2/6）↓ 继续向下滚动整页看 fixed（3/6）↓ 继续向下滚动整页看 fixed（4/6）↓ 继续向下滚动整页看 fixed（5/6）↓ 继续向下滚动整页看 fixed（6/6）

5. sticky

滚动前像 relative；碰到阈值后像 fixed「吸住」。参照的是最近的滚动容器。在下面灰框里滚动查看。

我是 sticky · top: 0

滚动内容行 1 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 2 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 3 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 4 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 5 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 6 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 7 —— 继续滚，看上方黄条是否吸顶。

滚动内容行 8 —— 继续滚，看上方黄条是否吸顶。

父级不能乱加 overflow: hidden，否则 sticky 常会失效。

常用写法

/* static：默认，top/left 无效 */
.box { position: static; }

/* relative：相对自身原位置偏移，仍占位 */
.box { position: relative; top: 12px; left: 12px; }

/* absolute：相对最近非 static 祖先 */
.wrap { position: relative; }
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* fixed：相对视口 */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
}

/* sticky：滚到阈值后吸住 */
.thead {
  position: sticky;
  top: 0;
}