浮动元素无法覆盖定位元素，因其不创建层叠上下文且z-index无效；需将浮动元素设为定位元素并设置z-index，或改用flex/grid布局规避层级冲突。
浮动元素盖不住定位元素，是因为 z-index 不生效
浮动元素（float）默认处于普通文档流的“浮动层”，而 position: relative/absolute/fixed 元素会创建新的层叠上下文（stacking context），但前提是它有 z-index 值且不为 auto。常见错误是给浮动元素设 z-index，却发现完全没用——因为浮动元素本身不构成层叠上下文，z-index 对它无效。
- 只有
position值为relative、absolute、fixed或sticky且z-index不为auto的元素，才真正参与层叠顺序计算 - 浮动元素会“让出”文档流位置，但它的绘制层级始终低于同级的定位元素（哪怕后者没设
z-index） - 如果想让某个浮动块显示在定位元素之上，必须把它也变成定位元素（比如加
position: relative），再配z-index
父容器触发 BFC 可以隔离浮动影响，但不能解决层级覆盖问题
很多人看到浮动塌陷或错位，第一反应是给父容器加 overflow: hidden 或 display: flow-root——这确实能触发 BFC，包裹住浮动子元素、防止塌陷，但它对层叠顺序毫无影响。BFC 解决的是布局范围问题，不是绘制顺序问题。
-
display: flow-root是现代推荐写法，比overflow: hidden更语义清晰，且不会意外裁剪溢出内容 - 即使父容器已触发 BFC，内部浮动子元素仍无法通过
z-index盖过兄弟定位元素 - 若需控制子元素之间的层级，应在子元素自身上设置定位 +
z-index，而不是依赖父容器
定位元素嵌套时，z-index 是相对其最近层叠上下文计算的
一个 position: absolute 元素的 z-index 不是全局排名，而是相对于它的“最近定位祖先”（即最近的、具有层叠上下文的祖先）。这意味着：外层定位容器的 z-index 低，里面再高的子元素也盖不过同级的其他定位块。
- 例如：
.outer { position: relative; z-index: 1; }，.inner { position: absolute; z-index: 999; }，这个.inner依然被z-index: 2的同级兄弟盖住 - 检查层级关系时，得顺着 DOM 往上找，直到遇到第一个非
z-index: auto的定位祖先 - 避免无意义地堆高
z-index数值（如 9999、99999），优先通过结构调整层叠上下文归属
现代替代方案：用 flex/grid 替代 float 布局，从源头规避冲突
浮动本就不是为复杂层叠设计的，它是 CSS2 时代为图文环绕妥协的产物。现在用 display: flex 或 grid 做布局，既能精准控制排列，又天然不干扰定位与层级逻辑。
- 浮动元素会脱离文档流但保留部分流式行为，flex/grid 子项则完全受容器控制，没有“让位”“塌陷”等副作用
- 所有 flex/grid 子项默认可直接设
position和z-index，无需额外处理层叠上下文 - 兼容性已不是问题：
flex支持到 IE10+（加前缀），grid在现代浏览器中稳定可用；仅需兼容 IE9 及更早版本时才需谨慎
真正麻烦的从来不是怎么调 z-index，而是搞不清哪个元素在哪一层叠上下文中。浮动和定位混用时，DOM 结构和定位祖先链比样式本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
