浮动与绝对定位元素重叠因前者属文档流而后者完全脱离，且默认层叠层级相同；z-index生效需元素已定位、父级未意外创建层叠上下文、避免混用布局方式。
浮动元素和绝对定位元素为什么会重叠
因为浮动元素仍属于文档流（只是视觉上偏移），而绝对定位元素完全脱离文档流，两者在层叠上下文中的默认层级可能相同。浏览器按 HTML 顺序渲染时，后出现的元素会覆盖先出现的——但这个规则只在同层叠上下文中有效。z-index 不起作用，往往是因为父容器没触发新的层叠上下文，或者 z-index 被设在了非定位元素上。
必须给父容器加 position:relative 吗
不一定非得是 relative，但必须让绝对定位元素的“包含块”有明确的定位上下文。否则它会一直往上找，直到 。常见做法是给最近的包裹容器设 position: relative，这样 top/left 和 z-index 才能按预期生效。
-
position: static（默认值）的元素不能作为包含块，z-index无效 -
position: relative、absolute、fixed、sticky都可创建包含块 - 如果父容器用了
transform、opacity 或will-change，也会隐式创建层叠上下文，影响z-index行为
z-index 生效的三个硬性条件
z-index 不是万能开关，它只对“已定位元素”（即 position 值不为 static）起作用，且需满足以下全部条件：
- 该元素本身
position必须是relative、absolute、fixed或sticky - 它的父级若设置了
z-index（且不是auto），就会创建新的层叠上下文，子元素的z-index只在这个上下文中比较 - 避免在同一个层叠上下文中混用浮动和绝对定位却忽略层级关系——比如浮动导航栏和绝对定位下拉菜单，必须确保下拉菜单的
z-index大于导航栏所在层叠上下文的基准值
示例：一个浮动的侧边栏 立即学习“前端免费学习笔记（深入）”； 不能。只要元素 真正需要处理重叠时，优先考虑重构布局方式，而不是强行用 和一个绝对定位的弹窗 position，它可能被渲染在 层级，而侧边栏因浮动仍在文档流中“占位”，视觉上就压住了弹窗——此时给弹窗加 z-index: 1000 没用，得先让它脱离 body 的默认层叠上下文。浮动元素本身能设 z-index 吗
position: static（包括仅用 float），z-index 就被忽略。想控制浮动元素的层级，只有两个办法：
position: relative + float: left（虽然不常见，但合法），再设 z-index
display: flex 或 grid，它们天然支持 z-index 且无脱离文档流副作用z-index 补救浮动和绝对定位混用带来的层叠混乱——后者容易在嵌套深、CSS 复杂度高时突然失效。
