最根本差异是文档流行为：absolute脱离文档流不占空间，relative保留在文档流中占位不变；定位基准也不同，absolute相对于最近非static祖先，relative相对于自身原始位置。
绝对定位元素会脱离文档流，相对定位不会
这是最根本的差异。设置 position: absolute 后，元素从正常布局中被完全移除，后续元素会“无视”它的存在，直接填补它原本占据的空间；而 position: relative 只是视觉上移动，元素仍在文档流中占位，其他元素的布局不受影响。
常见错误现象：把一个 position: absolute 的按钮放在表单里，结果提交按钮“消失”了——其实是被上面的绝对定位元素盖住，或因脱离流导致父容器高度塌陷。
- 若父容器没有显式高度，且子元素全为
absolute，父容器可能高为0 -
relative元素即使top偏移 100px，其下方的段落仍按它“没动过”的位置排布
定位参考点完全不同
absolute 的 top/left 是相对于最近的「已定位祖先」（即 position 不为 static 的父级），找不到就回退到初始包含块（通常是 ）；relative 的偏移始终以自身原始位置为原点。
使用场景：做下拉菜单时，通常给菜单容器加 position: relative，再把下拉列表设为 absolute——这样列表就能精准贴着触发按钮定位；如果忘了给父容器加 relative，列表就会飞到页面左上角。
- 祖先元素只要
position: relative、absolute或fixed就算“已定位”，sticky也有效 -
relative的百分比值（如left: 20%）是相对于其包含块宽度计算，不是自身宽度 -
absolute的百分比值也是相对于其定位上下文（即最近已定位祖先）的尺寸
z-index 行为一致，但层叠上下文生成条件不同
两者都支持 z-index 控制堆叠顺序，但 absolute 更容易意外创建新的层叠上下文（例如配合 opacity、transform 或 filter），而 relative 默认不会。
性能影响：频繁动画 absolute 元素（尤其带 top/left）会触发重排；用 transform: translate() 替代可避免。相对定位动画同理，但因不脱离流，有时对周围布局造成隐性扰动更难排查。
- 不要对大量
absolute元素滥用z-index，容易引发层叠顺序混乱 - 想让
relative元素真正“浮起”，必须确保其父容器有明确的z-index和非static定位，否则z-index不生效
实际开发中最容易忽略的一点
绝对定位不是“固定在屏幕某处”，而是固定在它的定位上下文中；相对定位也不是“永远跟着自己”，它的百分比偏移会随包含块缩放而变化——比如 left: 50% 在响应式容器里会持续漂移。
这意味着：依赖 absolute 实现的弹窗，在父容器被 transform 或 scale 时，位置可能错乱；而 relative 的 top: 10% 在小屏下可能只偏移几像素，大屏下变成几十像素，视觉节奏失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
