浮动元素被后面相对定位元素遮挡的根本原因是渲染顺序冲突，应优先用html顺序调整、bfc触发（如overflow:hidden）或同流浮动方案解决。
浮动元素被后面相对定位元素遮挡了怎么办
直接说结论：不是 z-index 能解决的问题，是文档流和渲染顺序的底层逻辑冲突。相对定位元素虽然没脱离文档流，但它的层叠上下文会覆盖在浮动元素之上——尤其当它出现在 HTML 里浮动元素之后时。
为什么 z-index 加了也没用
因为 z-index 只对「已建立层叠上下文」的元素生效，而普通浮动元素（float: left）本身不创建层叠上下文；后面那个 position: relative 的元素一旦有 z-index 值（哪怕是 z-index: 0），就自动创建了新的层叠上下文，且默认渲染在浮动元素所在层之上。
- 浮动元素属于「浮动层」，层级低于「定位层」
-
position: relative+z-index= 新层叠上下文，天然压在浮动层上面 - 即使把相对定位元素的
z-index设为 -1，它仍可能因父容器层叠上下文而无效
真正有效的三种做法（按推荐顺序）
优先选不依赖定位和 z-index 的方案，避免引入新层叠上下文：
- 把相对定位元素提前写在 HTML 中（即放在浮动元素之前），靠文档流自然前置
- 给浮动元素的父容器加
overflow: hidden或overflow: auto，触发 BFC，让浮动「收束」在其内部，不再影响后续兄弟元素的布局和层叠 - 把相对定位元素也改成
float（比如float: right），让它进入同一浮动流，再用clear控制顺序；注意这会改变其文档流行为
示例（BFC 方案）：
.container { overflow: hidden; } /* 触发 BFC，包裹内部浮动 */
哪些情况会悄悄让修复失效
看似改了，但页面还是遮挡，大概率踩了这些隐性坑：
- 父容器有
transform、opacity 、<code>will-change等属性 → 自动创建层叠上下文，干扰 z-index 层级计算 - 浮动元素用了
margin-bottom，但相对定位元素用了top负值，视觉上重叠，实际是位置错位而非层叠问题 - CSS 预处理器或构建工具插入了未预期的
z-index值（比如重置样式里写了* { z-index: 0 }）
查问题时，用浏览器开发者工具点开「Computed」面板，看目标元素的 z-index 是否显示为 auto，以及「Layer」标签页里是否真的分属不同渲染层——这才是最可靠的判断依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
