因为相对定位元素默认处于普通流中，其z-index属性仅在元素脱离正常文档流（即position为absolute、fixed或sticky）时才生效。要让同级相对定位元素的层级高于绝对定位元素，必须将其position改为absolute或fixed，或者通过改变dom结构顺序来调整渲染层级。
为什么relative的z-index无效？
在CSS层叠上下文规则中，非定位元素（如默认的static或relative）即使设置了z-index，也不会创建新的层叠上下文，且其z-index值被忽略。只有当position属性值为absolute、fixed或sticky时，z-index才会真正控制堆叠顺序。因此，同级元素中，absolute元素会覆盖relative元素，无论relative是否设置了z-index。
div.relative { position: relative; z-index: 10; }
div.absolute { position: absolute; z-index: 5; }
上述代码中，尽管relative设置了更高的z-index，但由于它仍处于普通流中，absolute元素会覆盖它。将relative改为absolute后，z-index才生效。
如何正确提升relative元素的层级？
若需保持相对定位特性（如保留占位空间），可改用flexbox或grid布局中的order属性调整视觉顺序；若需严格层级控制，应将position改为absolute并配合top/left偏移模拟相对位置。另一种方法是使用transform: translate()替代position:relative，因为transform也会创建新的层叠上下文，从而允许z-index生效。
div.container { display: flex; }
div.first { order: 2; }
div.second { order: 1; }
此方案通过flexbox的order属性实现视觉层级反转，无需修改position或z-index。适用于需要保持元素在文档流中但调整显示顺序的场景。
当relative元素与absolute元素重叠时，哪个会被遮挡？
根据CSS规范，后出现的兄弟元素默认覆盖先出现的元素。若absolute元素在HTML结构中位于relative元素之后，即使relative设置了z-index，也会被absolute遮挡。此时应调整DOM顺序或将relative改为absolute以启用z-index比较。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
