relative定位本身不使元素脱离文档流，仅作为absolute子元素的定位参照；需配合top/right/bottom/left才产生视觉位移，且其top向下偏移、left负值向左；它是最近非static祖先，但受外层定位元素或flex/grid布局影响。
relative 定位本身不会让元素“移出文档流”，它只是给内部的 absolute 子元素提供定位参照，所以如果你只对一个元素设了 position: relative 却没加 top/right/bottom/left，它是完全看不出变化的——这属于正常行为，不是失效。
relative 元素必须配合偏移属性才有视觉位移
单纯写 position: relative 只是“声明自己可以当参照物”，不触发位移。要看到它自己动，得加上至少一个偏移值：
-
top: 10px—— 向下推 10px（注意：relative 的 top 是向下偏移，和 absolute 不同） -
left: -20px—— 向左拉 20px（负值向反方向） -
transform: translateY(-5px)也能动，但这是视觉位移，不影响定位上下文
relative 是 absolute 的“最近定位祖先”，但有前提
子元素设 position: absolute 后，会找最近的、已定位（即 position ≠ static）的祖先作为参照。如果父级只有 position: relative 但没写任何偏移，它依然算“已定位”，能当参照。
常见踩坑：
立即学习“前端免费学习笔记（深入）”；
- 父级写了
position: relative，但被更外层的position: relative/absolute/fixed“抢先”成了定位祖先 - 父级用了
display: flex或display: grid，又没显式设position: relative，那它默认仍是static，不能当参照 - 父级设置了
overflow: hidden且子元素 absolute 偏移后超出，会被裁剪——看起来像“消失”，其实是被剪掉了
快速验证 relative 是否生效的小技巧
不用靠眼睛猜，三步确认：
- 在 devtools 中选中该元素 → 看 computed 面板里
position是否为relative - 临时加一句
outline: 2px dashed red，看边框是否随内容一起移动（relative 会保留原始占位） - 在子元素上写
position: absolute; top: 0; left: 0;，再看它是否贴在父级左上角——贴住了，说明父级 relative 已成功成为参照
relative 的核心作用就是“锚定”，它不抢位置也不藏内容，安静做好参照本职工作。想让它自己动，就给偏移；想让子元素认它，就确保它是最近的非 static 祖先。
