相对定位元素位移后仍占原文档流位置；其本质是先按正常流占位再基于原位置偏移，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）起作用，但它受层叠上下文限制。最常踩的坑是：
- 父容器有
opacity < 1、filter、will-change等——会隐式创建新层叠上下文，子元素的z-index只在该上下文中比较 - 两个 relative 元素没有共同层叠上下文祖先，它们的
z-index实际不可比 - 写了
z-index但忘了加position: relative（缺定位声明时z-index被忽略）
调试建议：在开发者工具中选中元素，看“Computed”面板里 z-index 是否显示为有效值；再逐级往上查是否有层叠上下文边界。
relative 和 absolute 混用时文档流怎么算？
关键记住一点：只有 position: absolute 的元素完全脱离文档流；relative 始终参与流。当一个 relative 元素内部包含 absolute 子元素时：
- 子元素的
top/left是相对于该 relative 父元素的 padding box 定位（因为 relative 父元素成了它的 containing block） - 但父元素自己仍在流中占位，absolute 子元素不影响父元素的尺寸计算
- 如果父元素 later 被 JS 动态修改
top，absolute 子元素不会跟着动——它的定位基准是父元素的初始位置
这意味着：relative 是“流中锚点”，absolute 是“从锚点出发画坐标”。两者配合能实现精准控制，但别指望 relative 父元素的位移带动 absolute 子元素同步偏移。
真正容易被忽略的是 containing block 的形成条件——不是所有 relative 父元素都能当 containing block，必须满足：有明确的 width/height（或内容撑开），且未被 overflow: hidden 等意外截断。否则 absolute 子元素可能回退到初始包含块（通常是 <html>）。
