浮动元素盖住绝对定位子元素是因为未创建独立层叠上下文，需给浮动父容器设非static position和z-index（如position:relative;z-index:0），再为子元素设更高z-index。
浮动元素为什么能盖住绝对定位子元素
不是因为 position: absolute 失效，而是因为浮动元素和普通流内元素（包括其子元素）默认处于同一层叠上下文（stacking context），而浮动本身不创建新层叠上下文。如果父容器没设 z-index 或设为 auto，它的子元素的层叠顺序就由 DOM 顺序和 z-index 共同决定——但此时浮动元素在文档流中“视觉上提前渲染”，容易压住后面生成的绝对定位子元素。
常见错误现象：div.float-left 盖住了它内部 div.absolute-tooltip；调试时发现 z-index: 999 没用，检查 computed styles 却显示该子元素的 z-index 被忽略（值为 auto）。
- 浮动元素本身没有
z-index（除非显式设置且触发了层叠上下文） - 绝对定位子元素若父容器未创建层叠上下文，其
z-index只在父容器内部生效，无法跨出与浮动兄弟竞争 - DOM 顺序很重要：后写的浮动元素会自然盖住先写的、同层叠上下文内的绝对定位内容
必须给浮动父容器加 z-index 并设 position
让浮动元素的父容器成为独立层叠上下文，才能让它的子元素（含 position: absolute）真正拥有可比的 z-index 空间。只设 z-index 不够，还必须搭配非 static 的 position 值（哪怕只是 position: relative）。
使用场景：侧边栏浮动 + 内部气泡提示、导航栏浮动 + 下拉菜单等。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.sidebar { float: left; }→ 子元素z-index无效 - 正确写法：
.sidebar { float: left; position: relative; z-index: 0; }（z-index: 0已足够触发层叠上下文） - 若需子元素浮在最上，再给子元素设更高
z-index，如.tooltip { position: absolute; z-index: 10; } - 注意兼容性：
z-index在 IE6–7 中对position: static元素无效，必须设position
浮动元素与绝对定位子元素的 DOM 顺序不能颠倒
即使层叠上下文建好了，DOM 顺序仍影响初始堆叠层级。浏览器按 HTML 顺序逐个渲染，同层叠上下文内，后出现的元素默认在前一个之上 —— 这条规则对浮动和绝对定位都适用。
常见错误现象：把 <div class="float-wrapper"><div class="absolute-child"></div></div> 放在浮动元素之后，结果还是被盖住。
- 确保浮动容器（及其子元素）在 HTML 中位于可能遮挡它的其他浮动/定位元素之前
- 避免用 CSS
order或 JS 动态插入打乱原始 DOM 顺序，否则层叠行为不可控 - 不要依赖
z-index强行“逆转” DOM 顺序带来的天然层级，那会让维护变脆弱
z-index 数值只要分层别越界就行，不必硬写 999
很多人无脑写 z-index: 9999，其实没必要。只要保证浮动容器的层叠上下文层级高于干扰源，并在其内部给子元素分配合理相对值即可。
性能影响很小，但数值过大可能暴露设计缺陷：比如多个模块都用 999+，后期加新弹窗就容易冲突。
- 推荐做法：浮动容器设
z-index: 1，其绝对定位子元素设z-index: 2；旁边导航栏设z-index: 10，下拉菜单设z-index: 11 - 避免跨模块复用同一级数值，不同功能区用不同基数（如 sidebar: 1xx, header: 2xx, modal: 3xx）
- Chrome DevTools 的 Layers 面板可直观查看层叠上下文边界，比光看
z-index更可靠
真正卡住人的从来不是 z-index 数字本身，而是没意识到浮动父容器是否已建立层叠上下文——这点一旦漏掉，调再多数字都没用。
