浮动元素总被定位元素盖住，因其不创建层叠上下文且z-index无效；解决方法是让其与定位元素同属一个由公共父容器触发的层叠上下文，并在该上下文中用position:relative+z-index精确控制层级。
浮动元素为什么总被定位元素盖住
因为 float 不创建新的层叠上下文（stacking context），而 position: relative/absolute/fixed 在满足特定条件时会触发层叠上下文，导致层级计算规则完全不同。浮动元素始终属于其父容器的层叠上下文，z-index 对它完全无效。
-
z-index只对「定位元素」（即position值为relative、absolute、fixed或sticky）生效，对float元素无任何作用 - 如果父容器没有显式设置
z-index（且非auto），浮动子元素的绘制顺序仅由 HTML 顺序和是否脱离普通流决定 - 常见错觉：以为给浮动元素加
position: relative再设z-index就能提层 —— 实际上它确实会提层，但同时也**失去浮动行为**（除非额外保留float）
让浮动元素显示在绝对定位元素上方的实操方法
核心思路不是“调高浮动元素”，而是“压低定位元素”——通过控制它们共同祖先的层叠上下文来统一调度。
- 给浮动元素和定位元素的**最近公共父容器**设置
position: relative和z-index: 1（或任意非auto值），让它成为层叠上下文根 - 再给浮动元素本身加
position: relative+z-index: 2，此时它才真正拥有可比较的层叠等级 - 同时确保定位元素的
z-index小于 2（比如z-index: 1），否则它仍会覆盖 - 注意：若定位元素的父级已存在层叠上下文（如设置了
z-index），那它的z-index是相对于该父级计算的，可能意外抬高层级
浮动与定位混用时的典型错误现象
不是布局错位，而是视觉层级“不讲道理”地穿插，尤其在动态插入内容或切换状态后更明显。
- 错误现象：
div.float-left看似在div.overlay（position: absolute）下方，但鼠标 hover 时却发现点击区域被遮挡 —— 实际是overlay的层叠上下文比浮动元素所在上下文“更高” - 错误写法：
.box { float: left; z-index: 999; }→z-index被忽略，浏览器直接当不存在 - 兼容性陷阱：IE6/7 中浮动元素在某些情况下会生成隐式层叠上下文，行为与现代浏览器不一致，但如今基本可忽略
- 性能提示：频繁触发层叠上下文（如大量
position: relative+z-index）可能影响合成层判断，不过对一般页面影响极小
什么时候该放弃浮动，改用更可控的方案
当需要精确控制多个元素间的前后关系，尤其是涉及模态框、下拉菜单、工具提示等交互组件时，浮动本质就不适合做层级管理。
立即学习“前端免费学习笔记（深入）”；
- 替代方案优先级：Flexbox / Grid 布局（无需脱离文档流，天然支持
z-index） >position: absolute配合明确层叠上下文 > 强行用float+position混搭 - 特别提醒：CSS
inset属性（如inset: 0）配合position: absolute比传统top/left/bottom/right更易维护，且不影响层叠逻辑 - 遗留项目中若必须保留浮动，至少确保所有参与重叠的元素都处于同一层叠上下文中，否则调试成本远高于重构
