Question

有一个奇怪的，因为在某些情况下，它有效，而在其他情况下，它没有。我正在整理网站并在此页面上{http://panchosrestaurant.com/drinks/beer/）当您翻转“饮品”按钮时会出现问题。会出现一个下拉列表，但是我的RevSlider的最后一个元素的图形框架出现在它上面。去Inspector，它说该元素的z-index是5.罚款。因此，我尝试将ul，li，li a，各种不同的元素制作成6或更多，更大，然后框架继续出现在它上面。我哪里错了？我的目标是错误的元素吗？

Answer 1

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

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

Answer 2

在下面的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 3

如果没有看到你的代码，我会假设你需要做的就是将一个位置应用于你想要超过z-index的元素：5

Answer 4

只需将z-index: 999;添加到.main-navigation li班级：

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

<强> [编辑]

正如 @Michael P 指出的那样，z-index只需要506来胜过`.tp-static-layer＆＃39}。类

z-index困境：无法将导航下拉列表显示在滑块上方

4 个答案: