如何通过z-index使移动端下拉菜单内容显示在最前方？

为什么调z-index没用？常见坑点及修复 #

• 父元素层级锁死了下拉层：如果下拉div的父容器（比如导航栏外层盒子）z-index比其他导航链接的父容器低，哪怕你给下拉div设z-index: 99999 !important也白搭——子元素的z-index是相对于父元素层级计算的，得保证下拉div所在的父容器z-index比其他导航元素的父容器高。
• 没给下拉div加定位：z-index仅对position: relative/absolute/fixed/sticky的元素生效，static定位的元素不认z-index。查查你的下拉div CSS里有没有设置非static的定位，比如加个position: absolute;。
• 父容器加了overflow裁剪：要是下拉div的父盒子设了overflow: hidden或auto，下拉内容会被容器框住裁掉，看起来就像被其他链接挡住了。把父容器的overflow改成visible，或者直接把下拉div移到这个父容器外面，避免被裁剪。
• 其他导航元素本身层级过高：有些导航链接可能自己就是定位元素，且z-index设得很高。这种情况光调下拉div没用，得要么降低那些链接的z-index，要么提升下拉div所在父容器的层级。

针对你的场景补充建议 #

既然你已经搞定了点击问题，重点放在显示层级上：

1. 先捋下拉div的所有父元素，给最靠近它的父容器加position: relative; z-index: 9999;，保证这个父容器的层级比其他导航元素的父容器高。
2. 给下拉div本身设position: absolute; z-index: 10000;（不用加!important，比父容器高一点就行）。
3. 排查导航栏里的其他元素，有没有设position: fixed或者离谱的高z-index，针对性调整即可。

内容的提问来源于stack exchange，提问作者TeeBeeU