子菜单和重叠的正文元素出现问题



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

在我们菜单的响应式版本上,当我将鼠标悬停在具有几个子菜单项的菜单项上时,会显示这些菜单项,但下面的元素也会通过文本显示。

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

这是一个 GIF:重叠问题

这是该网站的链接:http://gogift.com.au/wordpress/

任何帮助将不胜感激!

谢谢 保罗

您必须设置.header-row元素的 z 索引。因为它是相对定位的,所以它的 z 索引很重要。

这是现在的标题行:

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

将其更改为:

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

您还可以将 .header-row 设置为position:static,然后更改#main-nav元素的 z 索引:

.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索引,并且它是子项。因此,任何定义了 z 索引的元素都将位于内容的前面。

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

问题在于推荐幻灯片的动态设置z指数在90到100之间。由于它们没有具有定义的 z 索引和相对位置的父项,因此此 z 索引将与 .header-row 的 z 索引(仅为 2(匹配。

解决此问题的另一种方法是将<div id="content">的 z 指数设置为 1。

看起来这是以下两种情况之一:菜单的 z 索引不够高或菜单项的背景是透明的。

相关内容

  • 没有找到相关文章

最新更新