浮动元素被遮挡的根本原因是层叠上下文冲突，z-index无效；应优先用html顺序调整、触发bfc（如overflow:hidden）或同流浮动解决。
浮动元素被遮挡，不是 z-index 能直接修好的问题——它压根没在同一个层叠上下文中参与比较。真正起效的，是调整文档流结构或触发 BFC，而不是堆数字。
为什么给浮动元素加 z-index 没用
因为 float 元素本身不创建层叠上下文，也不响应 z-index（即使写了也忽略）。一旦后面有个 position: relative 的兄弟元素带了 z-index: 0，它就自动创建新层叠上下文，默认渲染在浮动元素之上。
-
z-index只对已定位元素（position不为static）生效，浮动不是定位 - 浮动属于「常规流层叠层级」，而
relative+z-index属于「定位层叠上下文」，两者不横向比大小 - 浏览器开发者工具的「Computed」面板里，浮动元素的
z-index始终显示为auto，这就是铁证
用 overflow: hidden 触发 BFC 是最简方案
给浮动元素的**直接父容器**加 overflow: hidden 或 overflow: auto，能强制它建立 BFC（块级格式化上下文），把浮动“收束”在内部，不再干扰后续兄弟元素的层叠和布局。
- 这个方案不改 HTML 结构，CSS 单行就能生效：
.container { overflow: hidden; } - 注意：如果父容器本身需要滚动或动画，慎用
overflow: hidden；可换用display: flow-root（兼容性稍差但更语义化） - 别给父容器同时加
transform或opacity ，否则会覆盖 BFC 效果，反而创建新的层叠上下文
HTML 顺序调整比 CSS 更可靠
把那个遮挡别人的相对定位元素，提前写在浮动元素之前——靠文档流自然前置，彻底绕过层叠上下文冲突。
- 比如原结构是：
<div class="floated">...</div> <div class="relative">...</div>，改成反过来 - 这招在 SSR 或静态页面中尤其稳定，不依赖任何 CSS 渲染逻辑
- 缺点是可能影响语义顺序（比如屏幕阅读器读取顺序），需结合
aria-order或视觉隐藏补救
哪些操作会让修复悄悄失效
看似加了 overflow: hidden 或调了顺序，但页面还是遮挡，大概率踩了这些隐性坑：
- 父容器或其祖先有
transform、opacity 、<code>will-change→ 暗中创建层叠上下文，把浮动和相对定位元素又隔开了 - 构建工具（如 PostCSS、Tailwind JIT）在打包时注入了全局
* { z-index: 0 }，导致所有元素被动进入新上下文 - 用了 CSS 预处理器嵌套过深，意外让相对定位元素的父级获得了
position: relative+z-index - 检查时只看样式面板，没点开「Layers」标签页确认两个元素是否真在同一条渲染层上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
