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

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

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

1. 两种使用场景

场景1：微调元素自身位置

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

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

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

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

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

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

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

1. 使用注意点

• 只写定位不写偏移：元素完全不动，仅作为定位父级；
• 正负数值控制方向：top正数向下、left正数向右，负数反向移动；
• 不会脱离文档流，不会覆盖下方正常元素。

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

1. 使用前提

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

1. 基础使用步骤

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

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

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

1. 不同组合用法

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

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

1. 核心特性使用逻辑

• 开启后脱离文档流：原来占据的位置直接消失，后面元素自动往上填补；
• 不设宽高时，宽度自适应内容，不会像普通块级盒子占满父容器；
• 会浮在普通文档流元素上方，可搭配z-index调整上下遮挡层级。

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

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

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

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

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

四、两者选用区分

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

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

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