z-index 对 float 元素无效，因其仅作用于定位元素（position≠static）；需添加 position: relative 等才能激活 z-index，否则浮动元素层级由 HTML 顺序决定。
float 属性本身不影响 z-index，但会让 z-index 完全失效——除非你同时设置 position。
为什么 float 元素的 z-index 总是无效
浏览器规范明确规定：z-index 只对「定位元素」生效，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。float 不属于定位，它只是让元素脱离文档流并靠边排列，不触发层叠上下文创建。
常见错误写法：
.btn { float: left; z-index: 999; }
这行 z-index 被浏览器直接忽略，无论设成 1 还是 9999 都没区别。
立即学习“前端免费学习笔记（深入）”；
-
float和z-index不能单独配对使用 - 即使加了
position: static（默认值）也无效，必须是非static - 浮动元素之间的覆盖顺序只由 HTML 出现顺序决定，和
z-index无关
让 float + z-index 生效的最小改动
只需给浮动元素加一行 position: relative，其他不变。
正确写法示例：
.sidebar { float: left; position: relative; z-index: 10; }<br>.modal { position: absolute; z-index: 20; }
此时 .sidebar 才真正参与层叠比较，且能被 .modal 覆盖（前提是两者处于同一层叠上下文）。
-
position: relative不改变元素位置，只激活z-index - 如果元素原本用
float是为了文字环绕图片，保留float没问题；如果是布局用途，建议直接删掉float改用display: flex - 所有需要精确控制遮挡关系的浮动元素，都得统一加
position: relative，否则层级不可预测
父容器意外锁死 z-index 的典型表现
你给子元素设了 z-index: 999，但它还是被 z-index: 1 的导航栏盖住？大概率是导航栏的父容器触发了新层叠上下文。
这些属性会让父容器“截断”子元素的 z-index 效果：
-
position: relative+z-index: 1 -
opacity: 0.99（哪怕只是 0.99，不是 1） -
transform: translateZ(0)或任何非none的transform
检查方式：Chrome DevTools → Layers 面板，看元素是否被框在某个父级渲染层里。一旦被框住，子元素再高的 z-index 也出不去。
现代替代方案比 float + z-index 更可靠
用 float 做布局再硬套 z-index 是在补漏洞，不是在解决问题。
更直接的做法：
- 侧边栏 →
display: flex或display: grid，z-index对网格项/弹性项直接有效（只要它们是定位元素） - 悬浮按钮 → 删掉
float，改用position: fixed或position: sticky - 文字环绕图片 → 保留
float，但不要指望它参与复杂层级控制；需要遮罩或角标时，用绝对定位子元素实现
真正难调试的不是 z-index 数值大小，而是层叠上下文嵌套层级——它藏在父元素的 opacity、transform 或 filter 里，肉眼根本看不出。
