float元素本身不创建层叠上下文，z-index仅对定位元素生效；即使加position: relative，若兄弟元素未设z-index或父级意外创建新层叠上下文，仍会导致层级失效。
float + position: relative 的 z-index 为什么无效
因为 float 元素本身不创建层叠上下文，z-index 只对已定位元素（position 值为 relative、absolute、fixed 或 sticky）生效——但仅当它参与层叠比较时才起作用。而一个同时写了 float: left 和 position: relative 的元素，虽然满足“已定位”条件，却仍可能被后续的 position: relative 兄弟元素盖住，原因在于：后者在 HTML 中出现更晚，且默认创建了新的层叠上下文。
- 未显式设
z-index的position: relative元素，其层叠等级为 “stack level 0”，但会按文档流顺序覆盖前面同级的浮动+relative元素 - 哪怕给浮动元素加了
z-index: 10，若兄弟元素没设z-index，它仍可能因渲染顺序压在其上 - 用 Chrome DevTools 的「Layers」面板确认是否真分属不同渲染层，比只看
z-index数值更可靠
让 float + relative 元素真正“浮上来”的写法
关键不是堆数值，而是确保两个元素处于可比的层叠环境里，并显式声明层级意图。
- 给需要前置的元素同时设置：
position: relative+z-index: 2 - 给后面可能遮挡它的兄弟元素也设
position: relative，但z-index: 1（或更低） - 避免父容器意外创建新层叠上下文：检查是否带
opacity: 0.99、transform: scale(1)、filter: blur(0)等属性 - 如果父容器用了
overflow: hidden清浮动，又在里面放了position: absolute子元素，注意它会被裁剪——此时改用display: flow-root更安全
更稳妥的替代方案：别依赖 float + relative 控制层级
这类组合本质是旧式布局的补救手段，现代项目中容易埋坑。真正稳定的解法是跳出 float 流，改用明确的层叠控制路径。
- 把图文混排等场景换成
display: flex或display: grid，天然规避浮动塌陷与层叠不可控问题 - 若必须保留 float（如兼容老项目），就把需要精确定位的子内容统一收进一个
position: relative容器里，再用position: absolute子元素做标签、角标等——即“子绝父相”模式 - 清除浮动别只靠
clear: both加在下一个兄弟块上；优先用display: flow-root触发 BFC，它不影响溢出行为，也不干扰层叠逻辑
调试时最容易忽略的三个点
很多“调了没用”的情况，其实卡在这些隐性环节上。
-
z-index值显示为auto？说明该元素根本没参与层叠比较——回去检查position是否拼错（比如写成positon: relative） - 开发者工具里看到元素有
stacking context: yes，但你没意识到它的父级已经把它锁死在局部层级里 - 用
transform: translateY(-5px)微调位置时，它会自动创建新层叠上下文，导致原本设好的z-index失效范围缩小
实际项目里，最常踩的坑不是不会写 z-index，而是没意识到 float 和 position: relative 并存时，你面对的不是一个单一的“谁在上谁在下”问题，而是两套渲染机制（浮动流 vs 层叠上下文）在暗处博弈。盯紧「Computed」里的 z-index 和「Layers」里的归属关系，比反复改数字管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
