17370845950

相对定位不脱离文档流，元素仍占原位置，通过top、left等属性相对于自身偏移，常用于微调或作为绝对定位的参考父级；2. 绝对定位脱离文档流，不占空间，相对于最近的已定位祖先元素进行定位，适用于弹窗、悬浮按钮等需要精确控制的场景；3. 两者核心区别在于是否脱离文档流、定位基准不同及空间占用情况，正确理解有助于精准布局控制。

相对定位（relative）和绝对定位（absolute）是CSS中常用的两种定位方式，它们都通过 position 属性设置，但行为上有明显区别。

1. 相对定位（position: relative）

元素设置为 relative 时，它仍然占据原来在文档流中的位置。你可以通过 top、right、bottom、left 属性相对于自身原本的位置进行偏移。

• 不脱离文档流
• 偏移后原位置仍被保留
• 常用于微调元素位置或作为绝对定位的参考父容器

示例：

这个元素向右移动20px，向下移动10px，但原来的空间还在。

2. 绝对定位（position: absolute）

元素设置为 absolute 后，会脱离正常的文档流，不再占据空间。它的定位是相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先），如果没有这样的祖先，则相对于初始包含块（通常是视口）。

• 脱离文档流，不影响其他元素布局
• 定位参考点是最近的已定位祖先元素
• 常用于弹窗、悬浮按钮、精确布局控制等场景

示例：

这个元素相对于外层div定位到左上角。

关键区别总结

• 文档流影响： relative 不脱离，absolute 脱离
• 定位基准： relative 相对自己原位置，absolute 相对于最近的已定位祖先
• 空间占用： relative 仍占位，absolute 不占位
• 使用场景： relative 多用于调整位置或设为父容器，absolute 多用于精确定位子元素

基本上就这些。理解它们的定位机制，能更好控制页面布局结构。