float 与 position: absolute 冲突，后者使前者失效；父容器需设 position: relative 才能成为 absolute 元素的定位上下文；z-index 对纯浮动元素无效，需配合定位属性使用。
因为浏览器会直接忽略 float，这不是 bug，是 CSS 规范强制要求的行为。
position: absolute 会让 float 失效
只要 position 值不是 static（比如设为 absolute、fixed 或 sticky），该元素就完全脱离文档流。而 float 的作用前提是“仍在文档流中参与排版”——两者机制根本冲突，浏览器优先执行定位逻辑，float 属性在计算后始终显示为 none（可在 DevTools 的 Computed 面板验证）。
- 写了
float: left又加了position: absolute，但元素既没靠左浮动，也没按预期定位 → 先检查是否误以为float还在起作用 - 在代码里保留
float声明，只会误导后续维护，实际毫无效果 - 想用
float实现左对齐？改用display: flex或text-align+inline-block更可靠
父容器用 float，子元素 absolute 却跑偏了
问题不在子元素，而在父容器没形成有效的定位上下文。浮动本身不会触发定位上下文，position: absolute 会一路往上找，直到 或 ，导致位置完全失控。
- 给父容器加上
position: relative（哪怕它同时有float: left） - 更稳妥的做法是：去掉父容器的
float，改用display: flex或grid控制整体布局 - 检查父容器是否设置了
overflow: hidden—— 这会裁剪溢出的absolute子元素，尤其影响下拉菜单、提示框
浮动和 absolute 元素重叠时 z-index 不起作用
浮动元素本身不参与层叠上下文，z-index 对它无效；只有加了 position: relative（哪怕不偏移）才能启用 z-index。但此时它已不是纯浮动行为，而是“浮动 + 定位”的混合状态，容易引发不可预测的渲染顺序。
-
.nav { float: left; z-index: 100; }→ 开发者工具里z-index被划掉，遮挡关系“不讲道理”地反了 - 若父容器有
opacity、transform或filter，会隐式创建新层叠上下文，子元素的z-index只在该父级内有效 - 真正要解决重叠，得统一层叠上下文根节点，而不是单个元素猛加
z-index
真正容易被忽略的是：absolute 元素的定位参考点，取决于最近那个 position 不为 static 的祖先，而不是视觉上“看起来挨着”的那个浮动块。别信眼睛，查 Computed 面板里的 Containing Block 字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
