浮动元素导致的“遮挡”实为父容器高度塌陷，并非z-index问题；其脱离文档流使父高坍缩为0，后续非浮动元素因无高度支撑而下移覆盖。

浮动元素“遮挡”其实是布局塌陷，不是z-index问题

浮动元素本身不会主动遮挡别人——它只是脱离文档流，导致父容器高度坍缩为0，后续非浮动元素就“掉下来”盖在它上面。你看到的“遮挡”，其实是

直接压在了

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

验证方法：打开开发者工具 → 选中浮动元素 → 切到「Computed」面板 → 查看 z-index 值是否为 auto。如果是，说明它根本没参与z轴排序。

真正有效的修复方式：BFC 或 HTML 顺序调整

优先用不引入新层叠上下文的方案，避免把问题变得更复杂：

• 给浮动元素的**直接父容器**加 overflow: hidden 或 display: flow-root，强制触发 BFC，让父容器“收住”浮动子元素，高度恢复正常
• 把遮挡它的那个相对定位元素提前写在 HTML 中（即放在浮动元素之前），靠文档流自然前置，彻底绕过层叠计算
• 如果必须同级浮动，给两个元素都加 float: left 并用 clear: both 控制换行位置，让它们共处一个浮动流

注意：overflow: hidden 会裁剪溢出内容；display: flow-root 更语义化但 IE 不支持；若父容器或其祖先有 transform、opacity < 1 或 will-change，会暗中覆盖 BFC 效果。

什么时候才该考虑用z-index？

只有当你明确需要让某个元素“浮在浮动内容之上”，且它本身已是定位元素时，z-index 才有意义。例如下拉菜单、模态遮罩、悬浮按钮等场景：

• 确保浮动元素和覆盖层的**最近公共父容器**设置了 position: relative 和非 auto 的 z-index（如 z-index: 1），成为统一的层叠上下文根
• 覆盖层自身设 position: absolute + z-index: 2，浮动元素保持原样或也加 position: relative + z-index: 1
• 千万别只给浮动元素加 position: relative 就以为能提层——它会失去浮动行为，除非同时保留 float: left

最易被忽略的一点：检查是否真被“遮挡”，还是只是背景透明。打开开发者工具，看目标容器的 computed height 是否异常小；再 hover 浮动元素，确认它的 bounding box 是否超出父容器范围——前者是清除浮动问题，后者才是层叠上下文问题。