浮动元素不参与层叠上下文，z-index对其无效；需配合position: relative才能生效；祖先的z-index会创建独立层叠上下文；推荐用flex/Grid替代。
浮动元素（Float）本身不参与层叠上下文（stacking context）的常规排序，z-index 对纯浮动元素无效——这是层叠顺序出错的根本原因。
浮动元素默认没有层叠上下文
设置了 float: left 或 float: right 的元素，即使加了 z-index，也不会按预期提升或压低层级。因为 z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）生效。
- 去掉
float，改用display: inline-block或 Flex/Grid 布局更可控 - 若必须保留浮动，需同时设置
position: relative（哪怕不偏移），才能让z-index生效 - 注意：仅设
position: relative+z-index就足够，无需配合top/left等偏移值
父容器触发层叠上下文影响子元素顺序
如果浮动元素的某个祖先设置了 z-index（且 position 有效），它会创建新的层叠上下文，导致内部所有子元素的 z-index 都只在该上下文中比较，无法与外部兄弟元素竞争层级。
- 检查浮动元素的父级或祖父级是否意外设置了
position+z-index - 临时移除这些设置，确认是否是它们“截断”了层叠关系
- 如需保留上下文，确保关键元素同属一个层叠上下文层级，或统一提升到更高上下文
浮动元素天然的文档流顺序优先于 z-index
浮动元素仍属于普通文档流，其渲染顺序受 html 结构先后和浮动方向共同影响。比如左浮动元素会尽可能靠左上排列，后出现的浮动块可能被前一个“推下”，此时视觉位置不等于层叠顺序。
立即学习“前端免费学习笔记（深入）”；
- 调整 HTML 中浮动元素的书写顺序：想在上层的，尽量写在后面（但需配合
position: relative+z-index） - 避免混用浮动和其他定位方式，容易引发不可预测的重叠行为
- 用
clear控制浮动后的换行，防止意外覆盖
现代替代方案更可靠
浮动本就不是为复杂层叠设计的。css Grid 和 Flexbox 天然支持顺序控制和层级管理，推荐逐步迁移：