Question

我正在帮助客户访问她的网站并遇到问题。

在菜单的响应版本上，当我将鼠标悬停在带有几个子菜单项的菜单项上时，会显示这些菜单项，但下面的元素也会显示在文本中。

违规元素是一个动态更新的推荐滑块，所以我猜这与它有关。

以下是GIF：overlap problem

以下是该网站的链接：http://gogift.com.au/wordpress/

非常感谢任何帮助！

谢谢，保罗

Answer 1

您必须设置.header-row元素的z-index。因为它是相对的，因此它的z-index是重要的。

这是标题行：

.header-row {
    position: relative;
    z-index: 2;
}

将其更改为：

.header-row {
    position: relative;
    z-index: 2000;
}

您也可以将.header-row设置为position:static，然后更改#main-nav元素的z-index：

.header-row {
    position: static;
    z-index: 2;
}

#main-nav {
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 2000;
    width: 100%;
}

编辑：由于存在一些混淆，我想为这个答案添加更多内容：

导航位于内容的前面，因为没有为<div id="content">及其子项设置z-index。因此，定义了z-index的任何元素都将位于内容的前面。

由于标题行的z-index为2 - 导航位于内容的前面。

问题是推荐幻灯片的动态集合z-index介于90和100之间。因为他们没有定义的z-index和相对位置的父级，所以这个z-index将与.header-row的匹配z-index只有2.

解决问题的另一种方法是将<div id="content">的z-index设置为1.

Answer 2

看起来这是两件事之一：菜单的z-index不够高或者菜单项的背景是透明的。

子菜单和重叠的body元素有问题

2 个答案: