z-index 问题：无法让导航下拉菜单出现在滑块上方

Question

有一个很奇怪，因为在某些情况下它有效，而在其他情况下则无效。我目前正在结束一个站点，在此页面 (http://panchosrestaurant.com/drinks/beer/) 上，当您滚动 'Drinks' 按钮时出现问题。应该会出现一个下拉菜单，但作为我的 RevSlider 的最后一个元素的图形框架出现在它上面。去了 Inspector，它说该元素的 z-index 是 5。很好。因此，我尝试将 ul、li、li a 以及各种不同的元素设为 6 或更多，但框架继续出现在它上面。我哪里错了？我定位的元素不正确吗？

Answer 1

在下面的 CSS 块中，您应该将 z-index 设置为高于 505 的值，这是您的图像边框设置的值。

@media screen and (min-width: 769px)
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul {
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
  z-index: 100;
}

Answer 2

在没有看到您的代码的情况下，我认为您需要做的就是将一个位置应用于您想要超过 z-index 的元素：5

Answer 3

您的 class tp-static-layers 元素的 z-index 为 505...

您必须在下拉元素 <ul class="sub-menu"> 上放置至少 506 的 z-index 才能获胜。或者重构你的一些样式。

Answer 4

只需将 z-index: 999; 添加到您的 .main-navigation li class:

.main-navigation li {
   margin: 0 14.1px;
   margin: 0 0.88rem;
   position: relative;
   z-index: 999;
}

[编辑]

正如 @Michael P 指出的那样，z-index 只需要位于 506 即可胜过 `.tp-static-layer' class

z-index 问题：无法让导航下拉菜单出现在滑块上方

z-index woes: Can't get navgational drop down to appear above slider

css

z-index