可能的z-index问题

Question

看来我的下拉菜单中的z-index做得很奇怪：

https://uma.be/evenement/uma-day-2020-best-media-campaigns/

将鼠标悬停在菜单项“委员会”上时，下拉菜单位于图像下方。

我已经检查了图像本身的Z索引和.mega-sub-menu的Z索引。两者在我看来都还可以。类.mega-sub-menu的z索引为999，图像没有索引。

我已在图像中添加了position: relative; z-index: 1;，但这并不能解决问题。

Lazy loader是否有可能对图像进行某些处理，使其遍历子导航？

Answer 1

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

在这种情况下，将是：

• #wrapper-navbar作为下拉菜单的父元素
• #tribe-events-pg-template作为页面内容（包括图像）的父元素

您需要做的是：

1. 将#wrapper-navbar的z索引设置为2
2. 相对放置#tribe-events-pg-template并将其z-index设置为1

更新的CSS：

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

应用修复程序后：

Answer 2

问题是您的#navbar的z-index属性。增加或删除它，应该可以解决您的问题 >

 #wrapper-navbar {
     position: relative;
     /* z-index: 1; */ 
    }

Answer 3

编辑以下内容（添加了z-index和位置）：

#tribe-events-pg-template, .tribe-events-pg-template {
    z-index: 0;
    position: relative;
    margin: 0 auto;
    max-width: 1200px;}