浮动元素本身无z-index，其“覆盖”是渲染顺序、背景缺失与BFC缺失造成的视觉假象；真控覆盖需从层叠上下文和绘制顺序入手，而非调float。

浮动元素本身没有 z-index，所谓“层级更高”是渲染顺序 + 背景缺失 + BFC 缺失共同造成的视觉假象；真要控制覆盖关系，得从层叠上下文和绘制顺序入手，而不是调 float。

浮动元素的 z-index 为什么无效

z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效。浮动元素默认是 position: static，即使写了 z-index: 999，浏览器也直接忽略。

• 检查开发者工具的 Computed 面板，确认目标元素的 position 不是 static，且 z-index 不是 auto
• 给浮动元素加 position: relative 才能激活 z-index，但它会改变文档流行为（比如触发新层叠上下文）
• 一旦父容器创建了层叠上下文（如设置了 opacity: 0.99、transform: scale(1)），子元素的 z-index 就只能在该上下文内比较

为什么浮动看起来“盖住”了普通块级元素

这不是 z-index 层级问题，而是布局错位：浮动元素脱离文档流后，后续块级元素仍按原位置渲染，而文字内容因属于行内格式化上下文（IFC）会自动绕行。

• 普通块级元素（如
  ）建立自己的块级格式化上下文（BFC），彼此隔离，不响应浮动边界
• 若浮动元素没背景色，而后续块级元素也没设背景，就会露出浮动元素的底色，造成“被盖住”的错觉
• 用开发者工具勾选 “Show layer borders” 或打开 Layers 面板，可验证实际绘制顺序——浏览器先画浮动元素（含 background/border），再画后续流内块

真正该用什么代替 z-index 来解决遮挡

优先修复布局逻辑，而非强行堆叠层级。常见手段包括清除浮动、触发 BFC、或改用现代布局方式。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 给父容器加 overflow: hidden 或 display: flow-root —— 触发 BFC，让容器包含浮动，同时避免外部块级元素与之重叠
• 在浮动元素后插入清浮动元素：
  ，或用伪元素：.container::after { content: ""; display: table; clear: both; }
• 彻底放弃 float 做主布局：用 display: flex 或 display: grid 替代，天然支持并排、对齐、响应式，且不引发塌陷或绕行不可控问题

什么时候才必须用 z-index 处理浮动相关遮挡

仅当浮动元素本身已定位（如图文旁的悬浮按钮、装饰角标），且你明确需要它浮在其他内容之上时。

• 必须同时设置 position: relative（或其它非-static 值）和 z-index，否则无效
• 确保其父容器没用 overflow: hidden，否则高 z-index 元素会被裁剪
• 若背景图所在容器是浮动元素的祖先，建议给它显式加 position: relative，防止层叠上下文混乱

最常被忽略的一点：浮动元素的“高层级感”几乎从来不是靠 z-index 实现的，而是由渲染顺序和 BFC 缺失共同导致的视觉误差；一上来就调 z-index，往往掩盖了真正的布局缺陷。