浮动元素的z-index无效是因为float不触发定位，z-index仅对position为relative/absolute/fixed/sticky的元素生效；必须添加position: relative才能启用z-index，且需统一层叠上下文根节点。
浮动元素的z-index为什么总是无效
因为float本身不触发定位，z-index只对已定位元素（position值为relative、absolute、fixed或sticky）生效。给float: left的元素直接加z-index: 999，浏览器会完全忽略——它连层叠上下文都没创建，更谈不上参与Z轴比较。
常见错误现象：.nav { float: left; z-index: 100; } → 开发者工具里能看到z-index被划掉，点击该元素时发现遮挡关系“不讲道理”地反了。
- 想让浮动元素有层级控制力，必须同时加
position: relative（哪怕不偏移） - 但加了
position: relative后，float行为仍保留——这点常被误认为“失效”，其实只是视觉上没变化 - 若父容器已有
opacity、transform或filter，会隐式创建新层叠上下文，此时子元素的z-index只在该父级内有效
绝对定位元素盖住浮动元素的根本原因
不是“定位天生优先”，而是默认渲染顺序下，position: absolute元素往往落在更高层叠上下文中。比如body里一个float侧边栏和一个未设父级position的.popup，后者会以body为参考定位，而body的层叠等级天然高于浮动元素所在上下文。
典型表现：弹窗点不到、hover失效、文字被遮挡却能选中——说明DOM结构正常，只是视觉层级错位。
- 检查
.popup的最近已定位祖先是否为空；若为空，它就在html/body层级渲染 - 给
.popup的直接父容器加position: relative; z-index: 1，把它拉进可控上下文 - 避免在浮动区域上方直接放
position: absolute，除非明确设了top/left避开重叠
让浮动与定位元素正确分层的实操路径
核心不是单个元素调z-index，而是统一它们的层叠上下文根节点。浮动元素无法主动“提层”，但可以靠公共父容器“托底”。
示例场景：左侧float: left导航栏 + 右侧position: absolute用户头像下拉菜单
- 给两者的最近公共父容器（如
.header）设position: relative; z-index: 1 - 给浮动导航栏加
position: relative; z-index: 2（保留float） - 给下拉菜单加
z-index: 3，确保它大于导航栏 - 若下拉菜单父级（如
.user-menu）已设z-index，它的z-index是相对于该父级计算的，可能意外压过导航栏
现代项目里该不该继续混用float和position
该避免。不是因为不能共存，而是维护成本高、行为不可预测。浮动本就为文字环绕设计，不是布局工具；而position适合局部精控，不适合整体结构。
容易被忽略的复杂点：当页面动态插入内容（如AJAX加载模块）、或使用will-change优化动画时，层叠上下文可能被意外重建，导致原本正常的z-index关系瞬间失效。
- 新项目直接用
display: flex或display: grid替代多栏浮动 - 老项目维护中若必须保留
float，把所有需要前置的交互元素（下拉、提示、弹窗）统一用position: absolute+ 显式层叠上下文包裹 - 永远不要依赖HTML书写顺序来控制覆盖关系——它只在同层叠上下文中可靠，且跨浏览器表现不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
