html - 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 block 都是绝对定位的，您将需要为它们设置一个正的 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;
}