position 相对定位、绝对定位核心知识点整理

一、基础前置知识

1. position 常用取值
   static：默认静态定位，标准文档流，无偏移，top/left/right/bottom/z-index 无效
   relative：相对定位
   absolute：绝对定位
   fixed：固定定位（拓展对比）
   sticky：粘性定位（拓展对比）

2. 定位偏移属性（仅非 static 生效）
   top / left / right / bottom：控制元素偏移距离；
   z-index：控制堆叠层级，数值越大越靠上，仅定位元素有效。

二、相对定位 position: relative

1. 参照对象
   自身原始在标准流中的位置

2. 核心特性
   不脱离标准文档流：原来占的空间会保留，其他元素不会挤上来；
   偏移规则：top/left 正向偏移，可写正负值；
   作用场景：
   微调元素位置；
   给子绝对定位元素充当定位父级（最重要用途）。

三、绝对定位 position: absolute

1. 参照对象（核心考点）
   向上寻找最近一层设置了 relative/absolute/fixed/sticky 的父级，以此父盒子为参照物；
   如果所有父级都没有定位，则参照根元素 （可视窗口）。

2. 核心特性
   完全脱离标准文档流：不保留原占位，其他元素会填充它原来的位置；
   自动变为行内块：可直接设置宽高；
   四个偏移可搭配使用：
   left + top：左上角对齐父参照物；
   right + bottom：右下角对齐；
   left:0;right:0 可实现宽度自适应；top:0;bottom:0 高度自适应。

关键搭配规则
父：position: relative（不脱流，保留布局）
子：position: absolute（以父为基准自由摆放）
开发最常用组合。
四、一句话总结
relative：相对于自己挪位置，不脱流，专门给子 absolute 当参照物；
absolute：相对于最近有定位的父盒子摆放，脱离文档流，常用于悬浮层、弹窗、角标。