position
定义CSS 定位属性，改变元素在文档流中的位置计算方式
position 有五个常用值，构成一条「脱离文档流程度」的谱系：static（默认，不定位）→ relative（相对自身偏移，仍占位）→ absolute（相对最近的定位祖先，脱离文档流）→ fixed（相对视口，滚动不动）→ sticky（相对滚动位置吸附，是 relative 与 fixed 的混合体）。
absolute 的「包含块」是最容易踩坑的点：它会向上找最近的已定位祖先，如果一直找不到就以初始包含块（html）为基准，而不是父元素。
- relative 常作为 absolute 子元素的定位锚点；
- z-index 只在定位元素之间生效，且容易陷入层叠上下文陷阱；
- sticky 需要指定 top/left 阈值，且父级不能有 overflow: hidden。
CSS
.parent { position: relative; } .badge { position: absolute; top: 8px; right: 8px; /* 相对 .parent 定位 */ } .toc { position: sticky; top: 56px; } /* 滚动吸附 */
⚠ 常见误区
- absolute 元素找不到定位父级时会「飞」到页面顶端，先给父级加 relative
- fixed 在移动端和 transform 容器内行为异常，慎用
- sticky 失效十有八九是父级 overflow: hidden / auto 导致