可能的 z-index 问题

Question

似乎我的下拉菜单的 z-index 做了一些奇怪的事情：

当您将鼠标悬停在菜单项“佣金”时，下拉菜单位于图像下方。

我已经检查了图像本身的 z-index 和.mega-sub-menu. 对我来说两者都很好。该类.mega-sub-menu的 z-index 为 999，而图像没有一个。

我已经添加position: relative; z-index: 1;到图像中，但这并没有解决问题。

Lazy loader 是否有可能对图像执行某些操作以使其越过子导航？

Answer 1

这是因为您的图像和菜单不在同一个堆叠上下文中。为确保它们处于相同的堆叠上下文中，您需要找出彼此同级的两个元素的父元素。

在这种情况下，这将是：

您需要做的就是：

更新的 CSS：

#wrapper-navbar {
  position: relative;
  z-index: 2;
}
#tribe-events-pg-template {
  position: relative;
  z-index: 1;
}

应用修复后：