浮动与绝对定位元素重叠因前者属文档流而后者完全脱离，且默认层叠层级相同；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）起作用，且需满足以下全部条件：
