本文详解因 position: absolute 与父容器 stacking context 冲突导致弹窗（如人数选择面板）被遮挡的典型问题，通过移除冗余定位、优化层叠上下文并合理设置 z-index，快速恢复弹窗正常显示层级。
本文详解因 `position: absolute` 与父容器 stacking context 冲突导致弹窗（如人数选择面板）被遮挡的典型问题，通过移除冗余定位、优化层叠上下文并合理设置 z-index，快速恢复弹窗正常显示层级。
在 Web 开发中，弹窗（如人数选择下拉面板）意外显示在下方内容之后，是典型的 CSS 层叠上下文（stacking context）问题——并非单纯 z-index 数值不够大，而是弹窗被包裹在了一个低层级的 stacking context 容器中，导致其 z-index 相对失效。
以
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini
.tommy-zeb-person-category-mini
.tommy-zeb-person-category-list {
background: #4778d9;
position: absolute; /* ⚠️ 关键问题：无明确 containing block 约束时，absolute 可能脱离预期层级 */
display: flex; /* ⚠️ 与 absolute 共存易引发渲染异常 */
flex-flow: column nowrap;
left: 0;
top: 100%;
margin-top: 4px;
width: 100%;
max-width: 100%;
padding: 8px;
border-radius: 4px;
}
✅ 解决方案分三步执行：
移除冗余的 position: absolute 和 display: flex
该弹窗实际依赖 JavaScript 动态控制显隐与定位（如 top: 100%），而 position: absolute 在缺乏明确定义的相对定位祖先（即 position: relative/absolute/fixed 的父容器）时，会基于初始包含块（通常是 viewport）定位，极易受页面流布局干扰。同时，flex 与 absolute 混用可能触发浏览器渲染歧义。-
确保弹窗父容器创建独立 stacking context
为弹窗最直接的非 static 定位祖先元素（例如 .tommy-zeb-wrapper-mini）添加：.tommy-zeb-wrapper-mini { position: relative; /* 创建新的 stacking context 起点 */ z-index: 1000; /* 赋予基础层级，高于页面常规内容（通常 z -
为弹窗本身设置足够高的 z-index，并保留必要定位
修正后的弹窗样式应精简、语义清晰：.tommy-zeb-person-category-list { position: absolute; /* ✅ 仅在父容器设为 relative 后才安全生效 */ top: 100%; left: 0; margin-top: 4px; width: 100%; max-width: 100%; padding: 8px; background: #4778d9; border-radius: 4px; z-index: 9999; /* ✅ 在父 context 内真正生效 */ /* 移除 display: flex / flex-flow —— 改用 block 或 grid 更可控 */ }
? 验证技巧：
- 使用浏览器开发者工具 → Elements 面板，逐级检查弹窗及其所有祖先元素的 position 和 z-index；
- 观察“Computed”标签页中是否出现 transform、opacity
- 对比正常工作的日期选择器（date picker）：它很可能已处于一个明确的 relative 父容器中，且未混用冲突的 display 值。
? 总结：
z-index 不是“全局高度”，而是“局部层级”。修复此类问题的核心逻辑是：先确立干净的 stacking context 树（通过 position: relative + z-index 显式声明父级），再在该上下文中赋予子元素合理的 z-index 值。盲目堆砌高 z-index（如 999999）不仅无效，还会掩盖真实布局缺陷。
