relative 元素视觉偏移但仍在文档流中，原位置被透明占位；absolute 定位参考最近非 Static 祖先，需“子绝父相”确保定位上下文。
relative 为什么“移走了”但下面元素不往上顶？
因为 position: relative 只是视觉偏移，元素仍在文档流中，原位置像被一个透明盒子牢牢占住。哪怕你写 top: 999px 把它推到屏幕外，它下面的兄弟元素依然按它“没动过”的位置来排布。
- 适用场景：微调按钮图标对齐、给 tooltip 做锚点、配合
z-index控制局部层级 - 常见错误：以为加了
relative就能当父容器让子元素绝对定位——不行，必须显式设置position: relative（哪怕不写top/left）才能成为“已定位祖先” - 注意：设负值时（如
top: -20px），若父容器有overflow: hidden，元素可能被裁剪
absolute 总是“飞到左上角”，定位参考到底是谁？
position: absolute 的定位起点不是自身，而是“最近的非 static 祖先”。如果所有父级都没设过 position（即全是默认 static），它就直接相对于 定位——这就是为什么没加样式时它突然贴左上角。
- 正确做法：想让它相对某个卡片定位？给这个卡片加
position: relative（纯作上下文，无需偏移值） - 陷阱：嵌套多层时，只要中间某一层写了
position: absolute或fixed，它就会“跳过”更外层的relative，只认离自己最近的那个 - 额外效果：绝对定位后，行内元素会获得类似
inline-block的特性（可设宽高、margin 等）
relative 和 absolute 的性能影响差异在哪？
relative 基本不触发重排（reflow），浏览器仍按原始位置计算布局；但会创建新的层叠上下文（stacking context），尤其配 z-index 后，子元素的层级只在该容器内生效。
-
absolute脱离文档流，本身不导致父容器重排，但如果祖先尺寸或位置变化（比如父容器高度被 js 修改），可能间接触发重排 - 高频动画推荐用
transform替代top/left，比两者都轻量；若必须用定位动画，absolute比relative更可控
“子绝父相”不是约定，而是硬性规则
所谓“子绝父相”，本质是 css 规范强制要求：子元素设 absolute 后，若想让它相对于某个父容器定位，那个父容器就必须是“已定位祖先”——即 position 值为 relative、absolute、fixed 或 sticky 的任意一种。
立即学习“前端免费学习笔记（深入）”；
- 只写
position: relative不加任何偏移，就能满足这个条件；不需要top: 0或left: 0 - 如果父容器用了
position: absolute，它本身可能脱离了文档流，导致高度塌陷——此时子元素虽能相对它定位，但父容器可能“看不见”内容 - 最稳妥的组合：父容器
position: relative+ 子容器position: absolute
实际开发中最容易忽略的，是“已定位祖先”必须存在且**最近**——中间插一个 position: absolute 的祖父，就足以让孙辈元素完全脱离你预想的定位上下文。