可能的 z-index 问题

Question

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

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

当您悬停菜单项 "Commissions" 时，下拉菜单位于图像下方。

我已经检查了图像本身的 z-index 和 .mega-sub-menu 的 z-index。两者对我来说似乎都可以。 class .mega-sub-menu 的 z-index 为 999 而图片没有。

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

是否有可能延迟加载程序对图像做了一些事情，使其越过子导航？

Answer 1

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

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

Answer 2

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

在这种情况下，将是：

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

您只需：

1. 将 #wrapper-navbar 的 z-index 设置为 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 3

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

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