相对定位元素位移后仍占原文档流位置；其本质是先按正常流占位再基于原位置偏移，top/left等不引发重排，z-index受层叠上下文限制，absolute子元素以relative父元素为containing block但不受其后续位移影响。
相对定位元素位移后仍占原文档流位置
相对定位（position: relative）的本质是：元素先按正常文档流占据空间，再基于自身原始位置做偏移。所以 top、left 等偏移不会导致周围元素重排——这不是 bug，是设计行为。
常见误解是以为“移动了就腾出空间”，其实它只是视觉上挪了，盒模型在流中仍锚定在原处。如果你看到其他元素没动，说明它工作正常；如果动了，反而要检查是否误加了 margin、transform 或父容器触发了 BFC/层叠上下文干扰。
- 只用
top/left/right/bottom偏移，不改margin或width/height - 避免和
transform: translate()混用——后者不触发重排但会创建新层叠上下文，影响 z-index 行为 - 用浏览器开发者工具的“Layout”或“Box Model”面板确认元素原始占位框是否还在
想让其他元素跟着让位？别用 relative，换方案
如果目标是“元素一挪，旁边内容自动填空”，position: relative 本身做不到。得切换思路：
- 用
margin或padding推挤——直接改变流内尺寸，最可控 - 用
float（需配合clear）——老但有效，适合图文环绕类布局 - 用
display: inline-block+ 垂直对齐控制——适合行内级微调 - 现代方案优先考虑
gap+flex/grid——位移靠重新定义排列顺序，而非“挪盒子”
例如：想让一个按钮右移并让文字自动缩进，与其 relative + left，不如给按钮加 margin-left: auto 放在 flex 容器末尾。
立即学习“前端免费学习笔记（深入）”；
relative 移动后遮挡其他元素？z-index 不生效的典型原因
z-index 只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）起作用，但它受层叠上下文限制。最常踩的坑是：
