浮动元素不创建层叠上下文，z-index仅对定位元素有效；要控制层级需先设置position，再调整z-index，并注意父级层叠上下文限制。
浮动元素（float）和 z-index 属于不同的层叠机制，它们在页面布局中的作用方式不同，控制层级时容易产生误解。要正确理解并控制它们的显示层级，需要清楚两者的渲染逻辑。
浮动元素与层叠上下文的关系
使用 float 会让元素脱离正常的文档流，向左或向右移动，直到碰到容器边缘或其他浮动元素。但浮动本身不会创建新的层叠上下文，也不会直接影响 z-index 的表现。
浮动元素仍然处于普通文档流的层叠层级中，其默认的绘制顺序遵循以下规则：
- 背景和边框：最底层
- 浮动元素：在块级非定位元素之后，行内元素和 positioned 元素之前
- 正常流中的 inline/inline-block 元素
- positioned 元素（relative、absolute、fixed、sticky）
z-index 起作用的前提是定位元素
z-index 只对定位元素有效，也就是设置了 position 为 relative、absolute、fixed 或 sticky 的元素。
立即学习“前端免费学习笔记（深入）”；
如果一个元素只是设置了 float，没有设置 position，那么给它加 z-index 是无效的。
错误示例：
.my-float {
float: left;
z-index: 999; /* 无效，因为没有定位 */
}
正确做法：
.my-float {
float: left;
position: relative;
z-index: 999; /* 现在生效 */
}
如何控制浮动元素的层级
如果你想让某个浮动元素显示在其他内容之上（比如遮挡后面的元素），可以这样做：
- 为浮动元素添加 position: relative（或其他定位类型）
- 设置合适的 z-index 值
- 确保被比较的其他元素也有明确的定位和 z-index，避免默认层叠顺序干扰
例如，你想让一个浮动按钮浮在图片上方：
.floating-btn {
float: right;
position: relative;
z-index: 10;
background: #007cba;
color: white;
padding: 10px;
}
.image {
display: block;
position: relative;
z-index: 1;
}
这样按钮就会在图片上方显示。
注意层叠上下文的嵌套影响
即使一个元素设置了很高的 z-index，如果它所在的父元素创建了层叠上下文且层级较低，它也无法超出父级的层级限制。
常见触发层叠上下文的方式包括：
- position: relative/absolute + z-index 不为 auto
- opacity 小于 1
- transform 不为 none
- will-change 设置为 opacity、transform 等
因此，检查父级是否无意中限制了层级非常重要。
基本上就这些。浮动本身不影响 z-index，关键在于是否定位。想控制层级，先加 position，再调 z-index，同时留意父容器的层叠上下文限制。不复杂但容易忽略。
