浮动与绝对定位元素重叠因前者属文档流而后者完全脱离，且默认层叠层级相同；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 或 <code>will-change，也会隐式创建层叠上下文，影响z-index行为
z-index 生效的三个硬性条件
z-index 不是万能开关，它只对“已定位元素”（即 position 值不为 static）起作用，且需满足以下全部条件：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 该元素本身
position必须是relative、absolute、fixed或sticky - 它的父级若设置了
z-index（且不是auto），就会创建新的层叠上下文，子元素的z-index只在这个上下文中比较 - 避免在同一个层叠上下文中混用浮动和绝对定位却忽略层级关系——比如浮动导航栏和绝对定位下拉菜单，必须确保下拉菜单的
z-index大于导航栏所在层叠上下文的基准值
示例：一个浮动的侧边栏 <aside class="sidebar"></aside> 和一个绝对定位的弹窗 <div class="popup"> 重叠时，如果弹窗父容器没设 <code>position，它可能被渲染在 层级，而侧边栏因浮动仍在文档流中“占位”，视觉上就压住了弹窗——此时给弹窗加 z-index: 1000 没用，得先让它脱离 body 的默认层叠上下文。
立即学习“前端免费学习笔记（深入）”；
浮动元素本身能设 z-index 吗
不能。只要元素 position: static（包括仅用 float），z-index 就被忽略。想控制浮动元素的层级，只有两个办法：
- 把它改成定位元素：比如
position: relative+float: left（虽然不常见，但合法），再设z-index - 调整 HTML 顺序：把要置顶的浮动元素写在后面，依赖文档流自然覆盖（但不可靠，尤其跨浏览器时）
- 更稳妥的做法是放弃浮动布局，改用
display: flex或grid，它们天然支持z-index且无脱离文档流副作用
真正需要处理重叠时，优先考虑重构布局方式，而不是强行用 z-index 补救浮动和绝对定位混用带来的层叠混乱——后者容易在嵌套深、CSS 复杂度高时突然失效。
