【解释一下 `position: absolute` 和 `position: relative` 的区别：】

解释一下 position: absolute 和 position: relative 的区别：

1. position: relative（相对定位）

• 不会脱离文档流
• 相对于元素原来的位置进行偏移
• 原来的位置会被保留
• 作为绝对定位子元素的参考点

例子：

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

2. position: absolute（绝对定位）

• 会脱离文档流
• 相对于最近的已定位祖先元素进行定位（如果没有已定位的祖先元素，则相对于 body）
• 原来的位置不会被保留，其他元素会占据这个位置
• 常用于弹窗、悬浮菜单等需要层叠的场景

例子：

.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

常见使用场景：

<div class="parent" style="position: relative;">
    <div class="child" style="position: absolute; top: 0; right: 0;">
        <!-- 这个子元素会相对于父元素定位在右上角 -->
    </div>
</div>

记忆技巧：

• relative 相对自己原来的位置移动，不脱离文档流
• absolute 相对已定位的祖先元素移动，脱离文档流

pease