为什么鼠标悬停导航菜单时，子菜单会显示在bxslider轮播图片的下层？

问题根本原因 #

这是层叠上下文优先级冲突导致的：bxslider 初始化时会自动给轮播外层容器设置 position: relative 以及默认 z-index 值，同时轮播内部元素会创建独立层叠上下文，优先级高于未配置对应 z-index 的导航菜单容器，因此子菜单会被轮播图遮挡。

修复方案 #

按优先级从高到低尝试即可：

• 给导航菜单最外层父容器设置更高的层叠优先级
  给导航的根父元素添加如下CSS：

  .你的导航容器类名 { /* 替换为你实际的导航外层元素选择器 */
    position: relative;
    z-index: 999; /* 数值高于bxslider默认的z-index即可，bxslider默认z-index通常为50 */
  }
  

  注意不要单独给子菜单设置z-index，仅给导航最外层父容器添加即可，否则子菜单只会在导航内部的层叠上下文内排序，无法提升和轮播容器的优先级对比。

• 手动降低bxslider容器的层叠优先级
  直接给bxslider默认生成的外层容器添加CSS：

  .bx-wrapper {
    position: relative;
    z-index: 1;
  }
  

• 排查父级溢出属性
  如果上述方案无效，检查导航菜单的所有父级元素是否设置了 overflow: hidden，如果有修改为 overflow: visible，溢出隐藏属性会裁剪超出容器的子菜单内容，也会产生类似被遮挡的效果。

移动端无此问题是因为slicknav的层叠规则和桌面端导航独立，不会和bxslider产生优先级冲突。

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