定位

position 指定元素如何参与定位方案：在常规流中占位，或相对某个**包含块（containing block）**偏移。配合 top / right / bottom / left（或简写 inset）控制偏移量；非 static 时还可使用 z-index 控制层叠顺序。

定位解决的是「在流式布局之外，把某个盒子放到哪里、叠在哪一层」，与 Grid、Flex 等「如何分配行列/主轴空间」是不同层面的能力，常组合使用。

偏移与层叠

top / right / bottom / left：在 position 为 relative | absolute | fixed | sticky 时生效；static 时忽略。
inset：上述四属性的简写，如 inset: 0 等价于四边均为 0。
逻辑属性：在竖排或 RTL 场景可用 inset-block-start、inset-inline-end 等，与逻辑属性一致，避免硬编码 top/left。
z-index：仅对定位元素（position 非 static）及 flex/grid 子项等特定情况有效；会参与层叠上下文的叠放顺序，数值大者更靠近用户。

`position` 各取值

`static`（默认）

元素按常规流排布，不建立定位偏移。
top / right / bottom / left、z-index 无效。

`relative`（相对定位）

相对元素在常规流中的原始位置偏移；仍占据原位置的空间，后续元素不会顶上来。
偏移不改变其他盒子的布局位置（仅视觉移动）。
常作为子元素 absolute 的定位参照（「子绝父相」）；z-index 非 auto 时会创建新的层叠上下文。

`absolute`（绝对定位）

脱离常规流，不为该元素在流中预留空间，后续元素会顶上来。
包含块（containing block）一般为：距其最近的、position 不为 static 的祖先的 padding 盒；若无，则相对于初始包含块（连续媒体下通常对应视口/根元素一侧，而非简单说「相对 <html> 标签本身」）。
下列祖先也会为 absolute 建立包含块（即使自身为 static）：例如带 transform / filter / perspective（非 none）的元素、部分 contain 值、will-change 指定属性等（详见 MDN）。
绝对定位盒的 margin 不参与外边距折叠。
场景：角标、下拉层、卡片内悬浮按钮；父级设 position: relative（或其它定位）限定范围。

`fixed`（固定定位）

同样脱离常规流。
默认相对于**视口（viewport）**建立的包含块定位，页面滚动时相对视口不动（如固定顶栏、返回顶部）。
例外：若祖先存在 transform、filter、perspective（非 none）等，会改为相对该祖先的包含块定位，表现类似「困在父级内」的 absolute——这是常见踩坑点。
移动端浏览器地址栏显隐可能导致视口高度变化，固定元素位置可能略有跳动。

`sticky`（粘性定位）

在常规流中仍占位；不脱离文档流（与 absolute / fixed 不同）。
根据最近滚动祖先与粘性包含块，在达到 top / right / bottom / left 阈值前表现为相对定位，之后「粘」在滚动容器内对应边缘，直到粘性包含块边界离开视口。
至少一个方向的 inset 不能为 auto（如 top: 0），否则该轴上等同于 relative 且无吸顶效果。
父级 overflow: hidden 可能导致 sticky 失效；吸顶范围受祖先滚动与包含块限制，不一定是整页视口。
场景：表头吸顶、分区标题、横向滚动容器内的粘性列。

对比总表

属性值	是否脱离常规流	主要参照（包含块）	常用场景
`static`	否	—	默认排版
`relative`	否（保留原空间）	自身原位置	微调、作为定位父级
`absolute`	是	最近定位祖先或初始包含块	角标、浮层、卡片内定位
`fixed`	是	视口（可被 transform 等祖先改变）	固定导航、悬浮客服
`sticky`	否（仍占位）	滚动祖先 + 粘性包含块	吸顶表头、粘性标题

与 Grid / Flex 的分工

	Grid / Flex	`position`
作用	在容器内分配轨道或主轴空间（布局系统）	在包含块内精确偏移、叠层
典型用法	页面骨架、列表、表单行	角标、弹层、吸顶、覆盖在格子上的图标

示例：用 Grid 做「侧栏 + 主内容」，在主内容格子里对通知图标使用 position: absolute; top: 0; right: 0。

常见注意点

子绝父相：给 absolute 子元素一个 position: relative（或其它非 static）的父级，避免相对整页定位；注意 transform 父级也会成为 fixed/absolute 的包含块。
无障碍：fixed / absolute 浮层勿遮挡放大字号后的正文；吸顶/固定条注意对比度与焦点顺序。
性能：滚动容器内大量 sticky / fixed 可能增加重绘成本，必要时可配合 will-change: transform 等优化（见 MDN 说明）。

总结

static 为默认；偏移与 z-index 需非 static 定位。
relative 占位偏移；absolute / fixed 脱离流；sticky 仍在流中占位。
absolute 看定位祖先与包含块规则；fixed 默认相对视口，但受 transform 等影响。
sticky 必须设置有效 top 等阈值，并关注滚动祖先与 overflow。
大布局用 Grid/Flex，局部叠放与微调用 position。

参考文献

以下链接在编写时均可正常访问：

资料	说明
MDN：position	各取值、包含块、sticky 说明
MDN：学习 CSS 定位	中文教程与示例
MDN：理解 z-index	层叠上下文与叠放顺序
MDN：top / inset	偏移属性
W3C：CSS Positioned Layout Module Level 3	官方规范（英文）