relative定位元素仍在原位置占空间，因其仅视觉偏移、不脱离文档流；top等偏移不影响布局计算，z-index需配合定位属性生效，且受父级层叠上下文限制。
relative定位为什么元素还在原位置占着空间
因为position: relative只是视觉偏移，不改变文档流布局——它挪动的是“渲染层”，不是“布局盒”。父容器计算高度、兄弟元素排布时，依然按原来的位置来算。
常见错误现象：top: 20px后下方内容没上移，看着像没生效；或者用z-index发现盖不住隔壁absolute元素，其实是层级没设对（relative必须有z-index才创建新层叠上下文）。
- 偏移量（
top/right/bottom/left）只影响自身渲染位置，不影响其他元素的布局位置 - 若要让后续元素“感知”偏移，得靠
margin或transform: translateY()（但后者不触发重排，也不影响文档流） -
relative元素设z-index才有意义，否则层叠顺序按默认文档流走
relative和transform translateY在偏移上的本质区别
两者都能“看起来挪了”，但底层机制完全不同：一个是布局系统里的偏移指令，一个是渲染管线里的像素级变换。
使用场景：做动画、微调对齐、避免重排时优先选transform: translateY()；需要配合z-index分层、或作为absolute子元素的定位上下文时，必须用relative。
立即学习“前端免费学习笔记（深入）”；
-
position: relative; top: 10px会触发浏览器重排（reflow），影响性能 -
transform: translateY(10px)只触发重绘（repaint），GPU加速更友好 -
transform不会让元素成为absolute的定位上下文，relative会 - 百分比值行为不同：
top: 10%相对于自身宽高计算；transform: translateY(10%)相对于自身高度
relative定位下z-index失效的典型原因
不是z-index没写，而是没满足生效前提：元素必须是定位元素（position值为relative、absolute、fixed或sticky），且父容器没形成更强的层叠上下文压制。
错误现象：z-index: 999写了但被遮住；兄弟元素明明relative却堆叠错乱。
- 父容器用了
opacity: 0.99、filter: blur(1px)或will-change: transform，会隐式创建层叠上下文，把子元素z-index关进“小黑屋” - 两个同级
relative元素，没设z-index时按HTML顺序堆叠，后写的在上面 -
z-index只在同一个层叠上下文中比较，跨上下文时看父级的层叠等级
relative作为absolute父容器时的常见陷阱
这是relative最常被误用的场景：以为加了relative就能让子absolute按它定位，结果子元素飞到视口左上角去了。
根本原因：父元素没设宽高，或内部内容塌陷（比如只有浮动子元素没清除），导致其“包含块”尺寸为0。
- 父元素必须有明确的尺寸（
width/height，或由内容撑开），否则absolute子元素的top/left会相对初始包含块（通常是body）计算 - 如果父元素内有
float子项，记得加overflow: hidden或clear: both防止高度塌陷 - 不要依赖
display: inline-block撑高父容器——它可能不触发BFC，仍会塌陷
relative怎么写，而是它什么时候“不算数”——比如父容器塌陷、层叠上下文被意外创建、或者误把transform当成了布局偏移。 
