浮动元素默认不参与z-index层叠计算，需添加position（如relative）才能使z-index生效；现代布局应优先使用flexbox或grid替代float。
浮动元素默认不参与 z-index 的层叠上下文（stacking context）计算，所以直接给浮动元素设置 z-index 通常无效——除非它同时成为定位元素（即 position 值为 relative、absolute、fixed 或 sticky）。
浮动元素本身没有层叠上下文
浮动（float: left/right）只是改变文档流中的排列方式，它不会触发新的层叠上下文，也不受 z-index 控制。浏览器会按“文档流顺序 + 浮动规则”来决定谁在上、谁在下，此时 z-index 完全不起作用。
- 即使写了
z-index: 999，只要没加position，该样式会被忽略 - 浮动元素的层叠顺序由其在 HTML 中的出现顺序和是否重叠决定，类似普通块级元素
- 父容器若未形成层叠上下文，子浮动元素之间无法用
z-index精确控制遮盖关系
让浮动元素支持 z-index 的关键：加定位
要使 z-index 生效，必须让元素成为“定位元素”。对浮动元素来说，只需额外添加 position: relative（最常用且不影响布局），即可激活 z-index。
-
position: relative+float是合法组合，元素仍保持浮动行为，同时获得层叠控制权 -
z-index值只在同一个层叠上下文中比较，父级若设了z-index（且position有效），会限制子元素的层叠范围 - 避免滥用
position: absolute替代float，否则会脱离文档流，可能破坏原有布局逻辑
真正影响层级的关键是层叠上下文树
页面的最终显示层级不是靠单个 z-index 决定的，而是由嵌套的层叠上下文逐级计算得出。浮动元素只有在其最近的定位祖先（或根元素）形成的上下文中，才能与其他同级定位元素比 z-index。
立即学习“前端免费学习笔记（深入）”；
- 每个
position元素（非static）+z-index不为auto，就可能创建新层叠上下文 opacity 、transform、filter等属性也会隐式创建层叠上下文，影响内部元素的z-index表现- 调试时可用浏览器开发者工具的“Layers”面板查看实际层叠结构，比单纯看 CSS 更可靠
现代布局中建议减少 float + z-index 混用
浮动本用于图文环绕等传统排版，而 z-index 多用于模态框、下拉菜单等交互组件。两者混合易引发不可预期的遮盖问题，尤其在响应式或动态插入内容时。
- 优先用
flexbox或grid替代float实现布局，它们天然支持z-index（子项设position后即可生效） - 需要精确控制遮盖关系时，统一用
position: absolute/relative+z-index，明确建立层叠上下文 - 若必须保留浮动（如兼容旧代码），务必检查所有相关父容器是否意外创建了层叠上下文，导致子元素
z-index被截断
