float元素被absolute元素盖住的根本原因是层叠上下文与渲染顺序差异：float不触发定位，z-index无效；absolute元素若无已定位祖先则相对于body定位，而html后出现的float元素在无z-index时可能视觉上覆盖前者。
float: left 本身不影响绝对定位元素的 position: absolute 行为，但会严重干扰它在页面中的视觉层叠顺序——根本原因不是“浮动压制定位”，而是两者分属不同层叠上下文，且默认渲染层级不同。
为什么设置了 position: absolute 的元素还会被 float: left 元素盖住
这不是定位失效，而是层叠规则在起作用：
-
float: left元素默认属于「普通流层叠层」，不创建新层叠上下文； -
position: absolute元素若其最近已定位祖先为空（即直接相对于body定位），则它会进入body的层叠上下文； - 但若
float元素在 HTML 中出现在该absolute元素之后，且两者都未显式设z-index，浏览器会按文档流顺序让后出现的浮动块“垫”在定位块上方——这是规范行为，不是 bug； - 开发者工具里能看到
z-index被划掉，说明该元素根本没被当作定位元素参与层叠比较。
z-index 对 float 元素完全无效，除非加 position
只写 float: left; z-index: 999; 是白费功夫：
-
z-index仅对position值为relative、absolute、fixed或sticky的元素生效； -
float和position可共存，比如float: left; position: relative; z-index: 2;—— 此时float仍控制水平排列，position: relative启用z-index； - 加了
position: relative后，元素视觉位置未必变化（没设top/left），但它已进入定位流，能参与z-index比较； - 如果父容器有
opacity、transform或filter，会隐式创建新层叠上下文，子元素的z-index就只在该父级内有效，无法越过父级去和外部元素比高低。
如何让 float 和 absolute 元素正确分层
核心不是单个元素调 z-index，而是统一它们的层叠上下文根节点：
- 给需要前置的模块（比如弹窗）加一个包裹容器，并设
position: relative; z-index: 100;； - 把原本直接写在
body下的position: absolute元素移到这个容器内； - 同时确保浮动侧边栏所在的父容器没有意外创建隔离上下文（比如删掉多余的
opacity: 0.99）； - 避免在浮动区域正上方直接放
position: absolute元素，除非明确用top/left错开重叠位置； - 更彻底的解法：用
display: flex或display: grid替代float布局，从源头消除层叠冲突。
最容易被忽略的一点是：浮动元素之间的重叠顺序由 HTML 书写顺序决定，而非 CSS 层级；而一旦混入定位元素，这个顺序就不再可靠。所以别依赖“后写的一定在上面”，该设 z-index 的地方必须设，且要确认上下文是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
