相对位置和绝对位置的使用

一、相对定位（position: relative）怎么用

两种使用场景
场景1：微调元素自身位置

1. 给目标元素开启相对定位；

2. 搭配 top / left / right / bottom 设置偏移距离；

3. 元素只会视觉移动，原来在页面占的空间还留在原地，周围文字、盒子不会挤上来。
   适用：图标微调、文字轻微偏移、小装饰错位摆放。

场景2：充当绝对定位的参照物（最常用）

1. 给父容器设置相对定位，不需要写任何偏移值；

2. 父容器自身布局完全不变，不会移位；

3. 内部子元素写绝对定位时，就会以这个父盒子四条边为基准摆放。
   这是布局标准搭配：父relative + 子absolute。

使用注意点
只写定位不写偏移：元素完全不动，仅作为定位父级；

正负数值控制方向：top正数向下、left正数向右，负数反向移动；

不会脱离文档流，不会覆盖下方正常元素。

二、绝对定位（position: absolute）怎么用

使用前提
想要精准以父盒子为基准，父元素必须提前设置 relative/absolute/fixed，否则绝对定位会以整个页面窗口为参照。

基础使用步骤

1. 父容器开启非静态定位（一般用relative，不破坏布局）；

2. 子元素设置绝对定位；

3. 任选 top / bottom、left / right 组合设置边距，控制距离父盒子边角的距离。

不同组合用法

1. 单方向定位（固定角落）
   只写 top + left / top + right / bottom + left / bottom + right，元素固定在对应角落，宽度由内容决定。
   适用：角落标签、关闭按钮、水印。

2. 双向拉伸居中
   同时设置 top:0、bottom:0、left:0、right:0，元素会填满整个父容器；配合margin:auto可实现盒子完全居中。
   适用：弹窗遮罩、居中弹出框。

核心特性使用逻辑
开启后脱离文档流：原来占据的位置直接消失，后面元素自动往上填补；

不设宽高时，宽度自适应内容，不会像普通块级盒子占满父容器；

会浮在普通文档流元素上方，可搭配z-index调整上下遮挡层级。

三、标准搭配完整使用流程（开发通用套路）

1. 外层父盒子添加相对定位，不加偏移；

2. 内层需要悬浮、覆盖、居中的子元素添加绝对定位；

3. 通过top、left等调整子元素在父盒内的位置；

4. 需要调整前后遮挡时，给任意一方加z-index数值。

四、两者选用区分

1. 只需要轻微挪位置、不想打乱页面布局 → 只用相对定位；

2. 需要元素浮在其他盒子上方、覆盖内容、固定在父盒子某一角 → 父relative + 子absolute组合；

3. 不设置父级定位直接用absolute，元素会跟着页面滚动，以浏览器页面边缘为基准。