relative定位是“在自身文档流位置基础上偏移”，保留原始占位空间，不脱离文档流；需显式声明position:relative才能激活top/left等偏移，且z-index会隐式创建层叠上下文。
relative 定位不是“相对父容器定位”，而是“在自身文档流位置基础上做偏移”——用错就导致布局错乱、兄弟元素重叠或点击区域偏移。
为什么 top/left 没生效？检查是否遗漏 position: relative
这是最常踩的坑：top、left 等偏移属性对 position: static（默认值）完全无效。必须显式声明 position: relative 才能激活偏移能力。
- 只写
top: 10px不起作用，浏览器直接忽略该声明 -
position: relative不改变文档流位置，但为子元素提供position: absolute的定位上下文（这点常被误认为“它会创建新层叠上下文”，其实不一定，需配合z-index） - 若目标是“仅微调位置”，别顺手改成
absolute——那会脱离文档流，可能撑不开父容器、影响后续元素布局
relative 偏移后，元素占位空间还在吗？
在——这是 relative 最关键的特性：偏移后的元素仍保留原始文档流中的空间，其他元素不会“补位”。也就是说，top: -20px 把盒子往上拉，但它原来占的高度依然存在，下方元素不会上移。
- 适合做“视觉微调”：比如让按钮图标略高于文字、让下划线对齐基线、修正字体渲染导致的垂直偏差
- 不适合做“腾出空间”的布局调整；若想让后续元素紧贴偏移后的元素底部，得额外用
margin-bottom: -20px手动抵消 - 注意盒模型：偏移基于 border box 的边界，但
transform: translateY()是基于自身中心点，两者行为不同，不要混用
和 margin/padding 微调比，relative 有什么不可替代性？
当需要“不影响相邻元素、又不改变盒模型尺寸”时，position: relative 是唯一选择。比如：
- 实现带箭头的 tooltip：tooltip 本身用
position: absolute，但箭头三角形用position: relative在 tooltip 内部微调，避免因 padding 或字体变化导致箭头错位 - 修复 input 元素在 flex 容器中与 label 垂直对齐偏差，
label加position: relative; top: 2px比改align-items更精准且不影响全局 -
margin会参与外边距合并，padding会扩大内容区尺寸，而relative偏移不触发重排（re-layout），只触发重绘（re-paint），性能更轻量
容易被忽略的层叠问题：z-index 在 relative 下的行为
position: relative 本身不创建新的层叠上下文（stacking context），但一旦设了 z-index（哪怕值为 0 或 auto 以外的任何值），就会强制创建——这会影响同级 relative 元素的遮盖顺序，也会影响其内部 absolute 子元素的定位基准。
- 没设
z-index的 relative 元素，按源码顺序堆叠；加了z-index: 0后，它就变成独立层叠上下文，内部z-index: 999的子元素也不会突破到外层 - 调试时若发现 relative 元素突然被遮住，先查父级是否意外设置了
z-index或opacity 、<code>filter等隐式创建层叠上下文的属性 - 微调场景下，尽量避免无意义的
z-index，除非真需要控制遮盖关系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
