CSS z-index没有正确响应 - 隐藏在内容下的子菜单

Question

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

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

我尝试为子菜单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;
}

Answer 1

如果你的菜单和#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;
}

Answer 2

你在什么位置设置了悬停元素？ z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

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

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

Answer 3

可能的错误：

1. 您的菜单容器Div可能有负z-index。

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

解决方案：

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

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