相对定位不触发重排但创建层叠上下文；绝对定位脱离文档流，祖先变化会触发重排，推荐用transform替代top/left实现动画与居中。
相对定位 position: relative 基本不触发重排，但影响层叠上下文
相对定位只是让元素在**原有文档流位置基础上偏移**，浏览器仍为其保留原始空间。这意味着它不会导致父容器或兄弟元素重新计算布局（即不触发 layout / reflow），性能开销极小。
但要注意：position: relative 会创建新的层叠上下文（stacking context），尤其当设置了 z-index 时。这会影响 z-index 的作用范围——子元素的 z-index 只在该相对定位容器内生效，无法与外部同级元素直接比大小。
- 适合用于微调位置（如按钮图标对齐、表单控件偏移）
- 避免在高频动画元素上滥用
z-index，否则可能引发意外遮挡 - 不要用它来“假装”脱离文档流——它没脱离，只是视觉上挪了
绝对定位 position: absolute 触发重排的条件很明确
position: absolute 会让元素完全脱离文档流，其尺寸和位置由最近的「已定位祖先」（position 为 relative、absolute、fixed 或 sticky）决定。如果没有这样的祖先，则相对于 body 定位。
关键性能点在于：**一旦祖先元素尺寸或位置变化（比如宽度改变、滚动、动态插入内容），所有后代绝对定位元素都可能需要重新计算自身坐标**。这不是每次渲染都发生，但确实存在隐式依赖链。
立即学习“前端免费学习笔记（深入）”；
- 父容器使用
display: flex或grid时，若子项设为absolute，父容器仍需完成完整布局流程再定位子项，开销略高于纯流式子项 - 避免将
absolute元素挂载在频繁 resize 的容器下（如可折叠侧边栏、响应式轮播容器） - 动画中慎用
top/left驱动绝对定位元素——它们会触发 layout；优先用transform: translate()
绝对定位在现代 CSS 中的常见误用场景
很多人用 position: absolute 实现居中、右上角徽标、下拉菜单定位，初衷是“精准控制”，但忽略了维护成本和潜在性能抖动。
例如：top: 0; right: 0; 放置通知徽标，看似简单，但如果父容器是 position: relative 且内部有动态高度内容（如加载中的列表），每次内容高度变化都会迫使浏览器重新解析该绝对定位元素的位置。
- 替代方案：用
margin+flex或grid实现徽标定位（如justify-content: flex-end; align-items: flex-start;） - 下拉菜单优先用
position: absolute，但确保其祖先足够稳定（比如固定高度的导航栏，而非随内容伸缩的div） - 绝对定位 +
transform组合是安全的（如position: absolute; transform: translate(-50%, -50%);），因为 transform 不触发 layout
/* 推荐：用 transform 实现居中，不触发重排 */
.tooltip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ❌ 避免仅靠 top/left 居中，尤其在滚动/动态容器中 */
.bad-tooltip {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
真正影响性能的是“定位链深度”而非定位类型本身
浏览器定位一个 absolute 元素时，要逐层向上查找最近的已定位祖先，并计算其 offset。如果这个祖先嵌套很深（比如 8 层 div，第 7 层才设 position: relative），每次定位都会多走几层 DOM 查询。
而 relative 虽然不脱离流，但如果大量使用（如表格每行都加 relative 再套 absolute 图标），也会因创建过多层叠上下文，增加合成器（compositor）的图层管理负担。
- 检查 DevTools 的 Layers 面板，看是否无意中生成了过多“Paint”图层
- 用
will-change: transform要谨慎——它强制提升图层，但过度使用反而降低性能 - 移动端尤其敏感：绝对定位元素若覆盖大面积区域（如全屏遮罩），又未设置
contain: layout paint，可能拖慢滚动帧率
实际项目里，性能差异往往藏在组合方式里，而不是单看 relative 还是 absolute。最常被忽略的是：你以为的“静态祖先”，其实正被 JS 动态修改 height 或 padding。
