浮动元素盖不住其他内容是因为float不创建层叠上下文，z-index无效；必须配合position:relative（或absolute/fixed）和显式z-index才能生效，且需确保父子层叠上下文关系正确。
浮动元素为什么总盖不住其他内容
因为 float 本身不参与层叠上下文（stacking context）的创建，它只是让元素脱离文档流、向左或右“飘”，但它的 z-index 默认无效。浏览器会按源码顺序和块级上下文决定谁在上谁在下，一旦父容器没形成新层叠上下文，浮动元素就容易被后面非浮动的兄弟元素“压住”。
- 常见错误现象：
div浮动后，后面的section文字或背景直接覆盖在它上面，哪怕写了z-index: 999也没用 - 根本原因不是“浮动错了”，而是没触发层叠上下文——
position: relative（或absolute、fixed）配合z-index才能生效 - 只加
position: relative不设z-index也能建立层叠上下文，但层级仍按文档流顺序；必须显式设z-index才能干预顺序
给浮动元素加 position:relative 的正确写法
不能只在浮动元素上加 position: relative 就完事。要让它真正“浮在上面”，得确保它和目标对比元素处于同一层叠上下文中，且该上下文由更外层控制。
- 错误写法：
.float-box { float: left; position: relative; }—— 没设z-index，等于白加 - 正确写法：
.float-box { float: left; position: relative; z-index: 2; } - 关键点：如果父容器有
transform、opacity 或filter，它自己就成了新的层叠上下文，此时子元素的z-index只在该容器内有效，可能还是被外面的兄弟容器盖住 - 使用场景：导航栏悬浮按钮、侧边工具条、弹出式提示框（需确保它比主内容层高）
为什么有时加了 z-index 还不管用
不是 z-index 失效，是它被更高层级的祖先节点“截断”了。层叠顺序不是全局线性排序，而是一层层嵌套计算的。
- 典型错误：给浮动按钮设
z-index: 999，但它父容器（比如一个.main-content）有position: relative; z-index: 10，而旁边的.sidebar父容器是z-index: 50—— 那么整个.main-content都会被.sidebar盖住，里面再高的z-index也出不来 - 检查方法：在 DevTools 里看元素的“Layers”面板，或逐级查看 computed
z-index和stacking context标记 - 兼容性注意：IE6/7 对
z-index解析极不一致，老项目需额外测试；现代浏览器中，position: sticky容器内的浮动元素层级行为也略有差异
替代方案：什么时候不该硬用 float + relative
如果只是为了“让某个元素显示在最上层”，float 其实是过时且易出错的选择。CSS Grid 和 Flexbox 已能更好解决布局与层级问题。
- 浮动本质是为图文环绕设计的，强行用于 UI 层级控制，容易引发清除浮动、高度塌陷等连带问题
- 更干净的做法：用
position: absolute配合inset或top/right定位，父容器设position: relative并统一管理z-index - 性能影响：频繁触发
float布局重排（reflow）比transform或will-change更重，尤其在动画场景下 - 简单示例：
.tooltip { position: absolute; z-index: 1000; }+.container { position: relative; }，比浮动+relative 组合更可控
真正麻烦的从来不是加不加 position: relative，而是搞不清当前元素到底属于哪一层叠上下文。多看一眼父级的 position 和 z-index，比反复调子元素的数值有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
