下拉菜单被遮挡的根本原因是堆叠上下文未正确建立，需确保父容器设 position: relative 并合理设置 z-index。
下拉菜单为什么一展开就被其他元素盖住
根本原因是 position: absolute 元素的堆叠上下文（stacking context）没建立好，z-index 在没有定位上下文时无效。浏览器默认把所有非定位元素放在同一层，而 absolute 元素一旦脱离文档流，又没显式声明层级，就容易被后续渲染的兄弟元素遮挡。
- 父容器必须有
position: relative（或absolute/fixed），否则子元素的absolute会相对于最近的已定位祖先或初始包含块定位，且z-index失效 -
z-index只对定位元素（position值为relative、absolute、fixed或sticky）生效 - 若父容器本身在某个
z-index较低的卡片/导航栏里，整个下拉菜单都会被压住——得同步检查父链上的定位与层级
怎么写一个不被遮挡的基础下拉结构
关键不是堆高 z-index 数值，而是让下拉区域和触发按钮属于同一个堆叠上下文，并确保该上下文足够“高”。
.dropdown {
position: relative;
}
.dropdown-trigger {
position: relative;
z-index: 10; /* 触发按钮自身层级，可选 */
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
z-index: 1000; /* 必须比触发容器的父级更高 */
}
-
.dropdown是包裹容器，加position: relative建立局部堆叠上下文 -
.dropdown-menu的z-index不需要设成 9999，但必须高于它可能被覆盖的兄弟组件（比如导航栏通常用z-index: 100，这里设1000更稳妥） - 避免给
.dropdown-menu父元素（如.dropdown）设z-index: 0或负值，这会创建新堆叠上下文并限制子元素的层级上限
常见踩坑：hover 时菜单闪退或无法点击
这不是 z-index 问题，而是定位后触发区域与菜单之间存在空白间隙，鼠标移出触发器就关闭了菜单。
- 用
top: 100%而不是top: auto或固定像素值，确保紧贴触发器底部 - 如果触发器有
border-bottom或padding-bottom，菜单顶部要留出对应间隙，否则悬停离开时断连 - 更稳的做法是把菜单直接嵌在触发器内部，或用
margin-top: -1px消除 1px 缝隙（但需测试不同缩放下的表现） - 不要依赖
:hover在移动端，iOS Safari 对:hover支持不稳定；真实项目建议用 JS 控制显隐
要不要加 transform 或 will-change 提升性能
纯 CSS 下拉菜单一般不需要。只有当菜单内含大量 DOM、动画频繁或滚动卡顿时才考虑。
立即学习“前端免费学习笔记（深入）”；
-
transform: translateZ(0)或will-change: transform会强制创建合成层，可能提升动画帧率，但也会增加内存占用 - 对静态显示/简单 hover 显隐的下拉菜单，加了反而可能引发意外重绘或模糊（尤其在 Windows + Chrome 下）
- 真正影响体验的是布局抖动（layout thrashing）：比如菜单宽度靠内容撑开，又在 JS 中反复读取
offsetWidth，这时应提前计算尺寸或用getBoundingClientRect()批量读取
下拉菜单的层级问题，本质是堆叠上下文的嵌套关系没理清，而不是 z-index 数字不够大。最常被忽略的是：父容器是否真的建立了定位上下文，以及这个上下文本身有没有被更高层的 z-index 压住。