z-index对float元素无效，必须配合非static的position才生效；浮动塌陷需用clearfix或flow-root修复；浮动与定位冲突时应改用relative等定位方式；父容器创建新层叠上下文会导致子元素z-index失效。
z-index 对 float 元素完全无效，必须先加 position
你给 float: left 的按钮写了 z-index: 999，但它还是被后面出现的定位弹窗盖住——这不是浏览器 bug，是 CSS 规范明确规定的：浮动元素不参与层叠上下文计算，z-index 直接被忽略。真正起作用的前提只有一个：position 值不是 static（即必须是 relative、absolute、fixed 或 sticky）。
所以第一步永远是：float 和 position 二选一，不能混用还指望 z-index 生效。
常见错误写法：div { float: left; z-index: 10; } → 无效。
正确写法：div { position: relative; float: left; z-index: 10; } → float 仍起作用（比如文字环绕），但此时 z-index 才开始参与比较。
浮动塌陷 ≠ 层级混乱，清除浮动解决的是布局断裂
右侧正文文字钻进左侧浮动菜单底下，看起来像“被盖住了”，其实根本不是层级问题，而是文档流塌陷导致的内容重叠。这时加 z-index 没用，得让父容器重新包裹住浮动子元素。
推荐做法：
• 给浮动容器加 class="clearfix"，配合 .clearfix::after { content: ""; display: table; clear: both; }
• 或直接给兄弟容器设 display: flow-root（现代写法，语义清晰，不裁剪溢出）
• 避免用 clear: both 单独塞一个空 <div>，冗余且破坏结构
注意：这些操作只修复高度塌陷和内容错位，对两个兄弟元素谁在上谁在下毫无影响。
浮动元素和定位元素打架时，优先把浮动改成 relative
当你要让一个“类似浮动效果”的元素（比如侧边栏、悬浮按钮）能稳定盖在其他内容之上，float 是过时且不可靠的选择。它设计目标只是文本环绕，不是控层。
更可控的做法：
• 移除 float，改用 position: relative + left/top 模拟偏移
• 或改用 display: inline-block + vertical-align
• 真正需要响应式布局时，直接上 display: flex 或 display: grid
这样做的好处：元素立刻支持 z-index，父子层级关系清晰，调试时能在 DevTools 的 Layers 面板里直观看到堆叠路径。
父容器意外创建层叠上下文，会让 z-index 彻底失效
你给弹窗设了 z-index: 2000，但它还是被一个 z-index: 10 的导航栏盖住？大概率是导航栏的父容器有 position: relative + z-index: 10，或者用了 opacity: 0.99、transform: translateZ(0) —— 这些都会触发新层叠上下文，把所有子元素锁死在里面。
检查要点：
• 在 DevTools 的 Computed 标签页里看 z-index 是否显示为 auto 或具体数值
• 查看 “Stacking Context” 标记，确认当前元素是否嵌套在某个隔离上下文中
• 不要盲目堆高 z-index 数值，先理清上下文归属：真正该调高的，往往是那个意外创建上下文的父容器本身。
立即学习“前端免费学习笔记（深入）”；
