相对定位（position: relative）不脱离文档流，通过top/right/bottom/left偏移自身位置但保留原占位；可作为absolute子元素的定位上下文，常用于微调对齐或提供定位锚点。
相对定位（position: relative） 是 CSS 中最常用也最容易被误解的定位方式之一。它不会让元素脱离文档流，但允许你通过 top、right、bottom、left 偏移元素本身的位置，同时保留其在文档流中原本占据的空间。
相对定位的核心行为
设置 position: relative 后，元素仍在正常文档流中——其他元素仍把它当“存在”来排版。偏移只影响它自己的渲染位置，不影响布局结构。
- 不设置偏移值时，元素位置完全不变，但已获得定位上下文资格（可作为子元素
position: absolute的参考父容器） - 设置
top: 10px，元素视觉上向下移动 10px，但原来的位置仍被“占着”，下方元素不会上移填补 - 偏移值支持负数，比如
left: -20px可实现向左微调对齐
常见使用场景：微调与定位锚点
相对定位不是为了“大挪移”，而是解决实际排版中那些“差一点点”的问题。
-
按钮图标对齐：图标比文字略高，给图标加
position: relative; top: 2px;轻松垂直居中 -
表单控件修正：input 和 label 高度不一致时，用
relative + top统一视觉基线 -
为绝对定位提供父容器：给某个容器设
position: relative，其内部position: absolute的子元素就会相对于它定位，而不是整个页面 -
悬停提示（tooltip）定位基础：tooltip 父元素设 relative，tooltip 本身 absolute 并配合
transform或偏移精确定位
容易踩的坑
相对定位看似简单，但几个细节常导致意外效果：
立即学习“前端免费学习笔记（深入）”；
- z-index 只对定位元素生效 —— 所以
position: relative是开启层叠控制的第一步 - 不要滥用它来“撑开高度”：它不改变盒模型尺寸，只是视觉位移，父容器高度仍按原始位置计算
- 和 float 混用时需谨慎：float 会触发 BFC，而 relative 不会，可能造成浮动未清除的布局错乱
对比其他定位方式的定位基准
理解 relative 的关键，在于看清它的“参照系”：
-
static：默认状态，无定位能力，top/right/bottom/left无效 -
relative：参照自身原始位置（即它本该在文档流中的位置） -
absolute：参照最近的 已定位祖先（即 position 值为 relative/absolute/fixed/sticky），无则参照初始包含块（通常是视口） -
fixed：始终参照视口，滚动不跟随
