浮动元素不创建层叠上下文，故z-index无效；其z轴顺序由所在层叠上下文决定，需用position+ z-index替代float来精确控制遮挡关系。
浮动元素本身不创建新的层叠上下文
浮动元素（float: left 或 float: right）不会自动触发 z-index 生效，因为它不满足「创建层叠上下文」的条件。也就是说，即使你给一个浮动元素设置了 z-index: 999，只要它的父容器没有形成层叠上下文，这个 z-index 就完全无效。
层叠上下文的常见触发条件包括：position 为 relative/absolute/fixed/sticky 且 z-index 值不为 auto；opacity 小于 1；transform 不为 none；will-change 指定相关属性等。而 float 不在其中。
- 浮动元素仍参与普通文档流的层叠顺序（按 HTML 出现顺序 + 元素类型决定）
- 它和普通块级元素、行内元素一样，默认处于「层叠等级 0」（即
auto层级） - 若同时存在定位元素（如
position: relative），后者会按层叠上下文规则覆盖浮动元素——不是因为“浮动层级低”，而是因为定位元素可能创建了新层叠上下文
浮动元素与其他元素的层叠关系由层叠上下文边界决定
真正影响 z 轴显示顺序的，是「谁属于同一个层叠上下文」以及「该上下文在全局层叠顺序中的位置」。浮动元素如果位于某个已建立层叠上下文的容器内，它的绘制层级就受限于该容器的层叠等级。
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
z-index: 1; /* 创建层叠上下文 */
}
.float-box {
float: left;
z-index: 999; /* 无效！该值被忽略 */
}此时 .float-box 的 z 轴位置完全由 .container 的 z-index: 1 决定，内部的 z-index 不起作用。
- 浮动元素无法通过自身属性脱离父层叠上下文的约束
- 若父容器未创建层叠上下文，则所有子元素（含浮动）都在根层叠上下文中按默认规则排序
- 多个浮动元素之间不会因浮动方向或顺序产生 z 轴差异——它们仍按 HTML 流顺序层叠
用 position + z-index 替代浮动来精确控制 z 轴
当需要明确控制前后关系时，应放弃仅靠 float 布局，改用定位方案。现代布局中，float 已基本退化为文字环绕（float: left on <img>）等少数场景。
例如实现左图右文且图片浮于文字上方：
.wrapper {
position: relative;
}
.image {
position: absolute;
top: 0; left: 0;
z-index: 2;
}
.text {
position: relative;
z-index: 1;
}-
position: absolute让元素脱离文档流并可触发z-index -
position: relative本身不脱离流，但配合z-index可创建层叠上下文 - 避免混合使用
float和z-index——前者不响应后者，容易误判渲染结果
浏览器渲染过程中浮动元素的绘制时机
在 Blink/WebKit 渲染流水线中，浮动元素在「布局（Layout）」阶段被计算位置并从正常流中抽出，但在「绘制（Paint）」阶段仍按层叠上下文内的常规顺序进入绘图列表（paint order）。它不会被单独提升到某个 z 层，也不会延迟绘制。
关键点：
- 浮动不影响层叠上下文的创建，也不改变自身在绘图列表中的相对位置
- 若出现“浮动元素盖住了定位元素”，大概率是因为定位元素没设
z-index，或其父容器层叠等级更低 - 调试时可用 Chrome DevTools 的 Layers 面板查看实际层叠上下文结构，比猜更可靠
浮动元素的 z 轴行为本质上是“无感”的——它不参与主动层级竞争，只被动服从所在层叠上下文的规则。真正要控制遮挡关系，得从上下文入手，而不是在 float 上加 z-index。
