html - CSS：下拉菜单隐藏在内容后面

Question

请看一下这个页面

如果您单击“肥胖手术”，应该会显示一个下拉菜单。（它使用 Twitter Bootstrap 下拉菜单）。

我可以确认菜单在那里，但它隐藏在底层内容后面，即使它具有高 z-index 的绝对位置。

你知道如何解决这个问题吗？

score 9 · Accepted Answer

显然问题出在 z-index 上。但问题实际上一直到最高父级。带有横幅类的标题元素具有 z-index： 1. 将其设置为更高的数字可以解决问题。

.banner {
    position: relative;
    z-index: 10;
}

score 2 · Accepted Answer

您应该设置 z-index:9999; 菜单元素及其子元素，以确保它们始终位于顶部。

您可以使用其他元素的 z-index 来保持它们在页面上的其他元素之上。

score 2 · Accepted Answer

检查溢出设置是否设置为隐藏，如果是删除值。

.banner {
    overflow: hidden // remove
}

score 0 · Accepted Answer

问题实际上是由于设置了绝对位置和高 z-index 的最顶部图像（云的图像）。谢谢大家的帮助。

score 0 · Accepted Answer

尝试将以下样式添加到类下拉列表中：

.dropdown {
  position: fixed;
  z-index: 9999;
}

5 回答 5