相对定位元素设 top 会遮挡下方文字，因其仍在文档流中占位；用 margin-top 或 flex 对齐更可靠，z-index 不适用此场景。
相对定位元素设了 top 却遮住下面文字，不是 bug，是它还在文档流里占位 —— 你看到的“遮挡”，其实是原始位置空着、新位置又叠上去造成的视觉重叠。
relative 元素的 top 偏移不脱离文档流
设 position: relative + top: -10px，元素视觉上往上挪了，但它原来占据的空间（高度、位置）仍被保留。下方文字照常从“原位置底边”开始排布，结果就钻进了你挪上来那块区域里，看起来像被盖住了。
- 检查开发者工具的 Layout 面板，会发现该元素有两块框：一块是原始占位（灰色虚线），一块是当前渲染位置（实线）
- 这不是 z-index 问题，
z-index在这里基本没参与——因为所有元素默认都在同一层叠上下文，且未触发新上下文 - 若父容器有
overflow: hidden，还可能直接裁掉偏移后溢出的部分，加剧“消失”错觉
用 margin-top 替代 top 是最稳的解法
要让上方元素“腾出空间”，真正把下方内容往下推，就得用影响盒模型的属性：margin-top 或 margin-bottom。
-
margin-top: -10px会让元素自身上移，同时把后续兄弟元素一起往下带 —— 这才是你想要的“整体下移”效果 - 如果目标是微调对齐（比如图标和文字基线），优先改父容器的
display: flex+align-items: center，比硬调top更可靠 - 避免在同一个元素上既设
top又设margin-top，容易引发不可预测的偏移叠加
z-index 不该用来解决这个遮挡
给相对定位元素加 z-index 并不能让它“浮起来避开下面文字”，因为：
- 它没脱离文档流，下方文字仍在正常流中紧贴其原始位置布局
- 即使
z-index把它图层提得再高，视觉上还是压在下面文字上面，可访问性和打印样式全乱 - 一旦父容器触发新层叠上下文（比如加了
transform: scale(1)），z-index就彻底失效，连调试都找不到原因
真正需要 z-index 的场景其实很窄
只有当两个**都已脱离文档流**的元素（比如一个 position: absolute 的下拉菜单 + 一个 position: fixed 的通知栏）发生重叠，才轮到 z-index 出手。而 relative + top 这种，本质上仍是流内元素，强行塞 z-index 是在用锤子拧螺丝。
最易被忽略的一点：很多所谓“遮挡”，其实是行内元素（如 <span></span>）设了 position: relative 但没转成块级显示，top 根本不生效，浏览器却悄悄 fallback 到 line-height 对齐逻辑，导致偏移量完全不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
