relative定位不触发文档流重排，兄弟元素按原位置渲染；仅改变自身视觉位置，占位不变；偏移后可能覆盖兄弟元素，需z-index控制层叠。
relative定位不会触发文档流重排，兄弟元素照常布局
给一个元素设置 position: relative，它原本在文档流中的位置依然被保留。也就是说，它的兄弟元素完全感知不到它是否被移动过——它们会按原位置渲染，不会为它“让位”，也不会因它的偏移而调整自身位置。
常见错误现象：top: 20px 把元素下移了，但下方的兄弟元素没跟着下移，看起来像是“叠上去了”；或者用 left: -10px 往左拉，结果元素跑出父容器，右边兄弟却纹丝不动。
- relative 只改变**自身渲染位置**，不改变**文档流占位位置**
- 兄弟元素的
margin、padding、display行为完全不受影响 - 若想让兄弟元素响应位置变化，必须改用
margin或transform（后者不触发重排但也不占位）
relative偏移后可能覆盖兄弟元素，z-index才起作用
一旦用了 top/left 等偏移，该元素就可能视觉上压在兄弟元素上。此时仅靠文档流顺序（HTML书写顺序）决定层叠已不够，z-index 才真正生效——但前提是该元素已建立新的层叠上下文（即 position 值不是 static）。
- 默认所有 relative 元素的
z-index是auto，等同于 0，层叠顺序仍由 HTML 顺序决定 - 显式设置
z-index: 1才能确保它浮在未设置 z-index 的兄弟之上 - 注意：父容器若有
overflow: hidden或transform，可能截断或改变 relative 子元素的溢出表现
relative和margin实现位移的区别在哪
表面看 top: 10px 和 margin-top: 10px 都能让元素下移，但机制完全不同：
立即学习“前端免费学习笔记（深入）”；
-
margin-top会**推走后续兄弟元素**，因为它是盒模型的一部分，参与文档流计算 -
top是**纯视觉偏移**，后续兄弟仍按原 margin-top 渲染，可能造成重叠或留白错觉 - relative 偏移后的元素仍可被
:hover、click触发，事件区域随视觉位置移动；而 margin 不改变事件区域逻辑 - 动画性能上，
transform: translateY()比top更优（触发合成层），但top支持更广的浏览器兼容性
relative定位在flex/grid容器中行为不变，但容易误判
即使父容器是 display: flex 或 grid，子元素设 position: relative 后的偏移，依然不影响其他 flex item/grid cell 的布局位置。但开发者常误以为“flex 自动对齐，relative 应该也跟着适应”，结果发现偏移后元素脱离对齐基准线。
- flex item 的
align-self/justify-self控制的是**原始位置**，relative 偏移是在此基础上叠加的视觉位移 - 如果想让兄弟元素“配合”移动，比如做错位卡片效果，应统一用
transform而非top/left，避免破坏 flex 流式语义 - 调试时可用浏览器开发者工具勾选 “Show layout shifts” 或临时加
outline: 1px solid red查看真实占位框
