浮动元素无法通过z-index改变层级，因其未创建层叠上下文且z-index仅对定位元素有效。需同时设置position为relative、absolute等非static值才能使z-index生效。例如添加position: relative后，z-index即可正确控制层叠顺序。需注意父容器若创建了层叠上下文（如设置opacity），仍会影响子元素的最终显示层级。
在使用CSS进行页面布局时，浮动（float）和层级控制（z-index）是两个常见但容易产生误解的概念。很多人会发现，给一个浮动元素设置 z-index 并不能如预期那样改变其显示层级。这背后的关键原因与层叠上下文（stacking context）和定位属性有关。
浮动元素不会创建层叠上下文
浮动元素本身不会建立新的层叠上下文，即使设置了 z-index，也不会生效。这是因为 z-index 只对定位元素有效，即满足以下任一条件的元素：
- position: relative
- position: absolute
- position: fixed
- position: sticky
如果一个元素只是设置了 float，而没有设置 position 为上述值之一，那么即使你写了 z-index: 999，浏览器也会忽略这个声明。
如何让浮动元素支持 z-index
要使 z-index 生效，必须同时满足两个条件：元素被定位，且处于同一个层叠上下文中。解决方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素添加 position: relative（或其他非 static 的定位）
- 设置需要的 z-index 值
.float-element {
float: left;
position: relative;
z-index: 10;
background: yellow;
}
这样该元素就能正确参与层叠顺序的计算，可以覆盖或被其他元素覆盖。
注意层叠上下文的嵌套影响
即使子元素设置了很高的 z-index，如果其父容器创建了层叠上下文（比如设置了 opacity
- 父A（z-index: 1）包含子A（z-index: 999）
- 父B（z-index: 2）包含子B（z-index: 1）
尽管子A的 z-index 更高，但它仍然会显示在子B之下，因为父容器的层级优先。
总结建议
处理浮动元素与 z-index 问题时，请记住：
- float 不等于定位，需配合 position 使用 z-index
- 只有定位元素的 z-index 才会生效
- 避免不必要的层叠上下文嵌套，以免干扰层级表现
- 现代布局推荐使用 Flex 或 Grid 替代 float，更清晰可控
基本上就这些，理解了层叠规则后，这类“不生效”的问题就容易排查了。
