2

我创建了一个标题功能区菜单（页面顶部的水平菜单），当悬停在其链接上时，会为每个链接打开一个子菜单，该菜单应显示在主要内容的顶部。

问题是子菜单在主内容下方呈现。

我尝试为 sub-menu 设置更高的值z-index，但这没有帮助。

当我将主要内容设置z-index为-1（0也不起作用）时，会显示子菜单，但是内容中的所有按钮都不起作用。

我搜索了我的整个 CSS，甚至没有一个z-index作业。

更新

内容 div 的样式为：

#content {
  background: #fff;
  position: absolute;
  top: 176px;
  bottom: 25px;
  padding: 20px 0px 63px;
  overflow: hidden;
}
4

3 回答 3

3

如果你的 menu 和 #content 块都是绝对定位的，你需要在它们上设置一个正的 z-index 值以允许重叠（你的菜单的 z-index 比你的内容高）。

CSS：

#content {
  background: #fff;
  position: absolute;
  z-index: 1;
  top: 176px;
  bottom: 25px;
  padding: 20px 0px 63px;
  overflow: hidden;
}

#menu {
  z-index:10;
}
于 2012-12-31T04:34:23.673 回答
0

您将悬停元素设置为什么位置？z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

问题可能出在您的 HTML 而不是您的 css 中，例如，如果您忘记关闭某个元素，它可能会与其他元素重叠。

无论哪种方式，如果您在问题中添加了一些代码，都会有很大帮助。

于 2012-12-31T04:27:50.973 回答
-1

可能的错误：

  1. 您的 Menu Container Div 可能有负 z-index。

  2. 您的 Body 或 Wrapper 可能具有非常大的 z-index 值。

解决方案：

  1. 删除所有z-index，只需复制菜单代码并粘贴到body标签或包装器div标签的末尾。您还可以添加 z-index:99; 到子菜单。

  2. 从 Body 或 Wrapper 中删除 z-index 并将 z-index 添加到菜单。

于 2012-12-31T04:22:51.900 回答