z-index 对浮动元素无效，因其默认 position: static；需先设 position: relative 再设 z-index 才生效，且浮动与绝对定位元素需共享同一层叠上下文根节点。
z-index 对浮动元素完全无效，这不是数值设小了，而是它根本没进层叠计算流程。
为什么 float 元素加了 z-index 也不起作用
浮动元素默认是 position: static，而 z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效。浏览器直接忽略 float 元素上的 z-index 声明，连警告都不会抛。
- 错误写法：
.box { float: left; z-index: 999; }→ 完全不生效 - 正确前提：必须先加
position: relative（哪怕不偏移），再设z-index - 更隐蔽的问题：如果该元素的父容器有
opacity: 0.99、transform或will-change，会创建新层叠上下文，子元素的z-index就被锁死在内部
浮动和绝对定位元素互相遮挡怎么办
这不是“谁 z-index 更大”的问题，而是它们大概率分属不同层叠上下文——浮动元素在常规流上下文中，而 position: absolute 元素一旦设了 z-index（非 auto），就会创建自己的上下文。
- 关键修复：给它们的**最近公共父容器**加
position: relative（不设z-index或设为0），让它成为共同的层叠上下文根节点 - 浮动元素本身可保持
float: left，无需额外改position - 绝对定位元素需显式设
z-index（如1或2），数值才真正参与比较 - 避免给公共父容器设
z-index: auto或漏掉position，否则上下文不成立
下拉菜单/弹窗被浮动块盖住的典型场景
表面是层级问题，实际常由三重断裂导致：父容器塌陷 + 定位上下文缺失 + 层叠上下文截断。硬调 z-index 会掩盖真实病灶。
- 第一步：给触发下拉的父元素（如
.nav-item）加position: relative—— 这是position: absolute子菜单能“认爹”的前提 - 第二步：清除浮动，防止父容器高度坍缩（推荐用
.clearfix::after伪元素，而非overflow: hidden，后者可能裁掉下拉区域） - 第三步：检查该父容器或其祖先是否意外带
opacity、transform等触发属性；用 DevTools 的 «Layout» 面板确认 «Stacking context» 是否为Yes - 移动端 Safari 和微前端中尤其要小心：全局
body { z-index: 0 }会让挂到body下的浮层整体失效，得查真实 DOM 位置并给挂载容器设高z-index
真正难处理的不是 z-index 数值本身，而是层叠上下文的嵌套关系和浮动引发的文档流断裂——这两者叠加后，DOM 顺序、渲染层、事件落点都可能错位。别只盯着一个属性调，先用 getBoundingClientRect() 和 DevTools 的 «Paint flashing» 确认点击时是否真命中目标元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
