css - 可能的 z-index 问题

Question

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

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

当您悬停菜单项“佣金”时，下拉菜单会出现在图像下方。

我已经检查了图像本身的 z-index 和.mega-sub-menu. 两者在我看来都不错。该类.mega-sub-menu的 z-index 为 999，而图像没有。

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

延迟加载器是否有可能对图像进行处理以使其越过子导航？

标签： cssz-index

Answer 1

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

在这种情况下，这将是：

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

您需要做的就是：

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

应用修复后：