浮动元素不参与层叠上下文，z-index 直接失效；z-index 仅对非 static 定位元素生效，浮动属布局行为而非定位模式；混用 float 与 position: relative 时 z-index 方可生效；现代布局应优先使用 flex 或 grid 替代浮动。
浮动元素不参与层叠上下文，z-index 直接失效
浮动元素（float: left 或 float: right）本身不会创建层叠上下文，也不受 z-index 控制——哪怕你给它设置了 z-index: 999，只要没触发层叠上下文，这个值就完全被忽略。
根本原因是：z-index 只对「定位元素」（即 position 为 relative、absolute、fixed 或 sticky）生效；而 float 是一种布局行为，不是定位模式。
- 浮动元素仍属于普通文档流（只是视觉上偏移），其层叠层级由「文档顺序 + 浮动方向 + 是否有清除」决定，而非
z-index - 如果同时用了
float和position: relative，z-index才可能起作用——但此时起效的是定位属性，不是浮动 - 浏览器渲染时，浮动元素默认位于「非定位的块级元素」之上、「行内内容」之下，这个顺序无法用
z-index调整
z-index 生效的前提：必须先有层叠上下文
一个元素要响应 z-index，得满足两个条件：① position 不是 static；② 它或其某个祖先已建立层叠上下文（比如设置了 opacity、transform、filter、will-change 等）。
常见误操作是给浮动容器加 z-index，却忘了它父级没有层叠上下文，结果整个子树都“被压扁”在底层。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.box { float: left; z-index: 10; }→z-index被静默忽略 - 正确写法：
.box { float: left; position: relative; z-index: 10; }→ 此时position: relative触发定位，z-index才生效 - 注意：若父容器有
opacity: 0.99，它会创建新层叠上下文，子元素的z-index就只在这个上下文中比较，不再和外部元素竞争
浮动与定位混用时，层叠行为更难预测
当一个元素同时设置 float 和 position: absolute，float 属性会被完全忽略——绝对定位元素脱离文档流，浮动失去意义。但很多人没意识到这点，还在调试“为什么浮动没效果”，其实是因为定位已接管布局。
-
float和position: absolute/fixed互斥，后者优先级更高 -
float和position: relative可共存，但相对定位仅提供偏移锚点，不影响浮动流，z-index在此时才真正可用 - 若多个浮动元素重叠（比如右浮动撞左浮动），最终谁在上取决于 HTML 顺序和清除规则，
z-index依然无效
现代替代方案：放弃浮动，改用 display: flex 或 grid
浮动本就不是为复杂层叠设计的，它的原始用途只是实现文字环绕图片。今天所有主流布局需求（多列、对齐、响应式）都有更可控、更符合直觉的替代方案。
- 用
display: flex替代左右浮动：天然支持order控制视觉顺序，z-index在 flex item 上正常工作 - 用
display: grid替代浮动布局：可精确控制每个格子的层叠顺序，且无需清除浮动 - 如果必须兼容老项目，至少把浮动包装进一个
position: relative容器中，并在该容器上设z-index，避免直接操作浮动子元素
