Html CSS：下拉菜单隐藏在内容后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18772724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Dropdown menu gets hidden behind the content
提问by farjam
Please take a look at this page
请看看这个页面
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
如果您单击“肥胖手术”，则会显示一个下拉菜单。（它使用 Twitter Bootstrap 下拉菜单）。
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
我可以确认菜单在那里，但它隐藏在底层内容后面，即使它具有高 z-index 的绝对位置。
Do you have any idea how to fix this?
你知道如何解决这个问题吗？
回答by jah
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
显然问题出在 z-index 上。但问题实际上一直到顶级父级。带有横幅类的标题元素具有 z-index： 1. 将其设置为更高的数字可以解决问题。
.banner {
position: relative;
z-index: 10;
}
回答by MadScientist
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
您应该设置 z-index:9999; 菜单元素及其子元素，以确保它们始终位于顶部。
You can play with the z-index of other elements to keep them above others on the page.
您可以使用其他元素的 z-index 来保持它们在页面上的其他元素之上。
回答by ppak10
Check if the overflow setting is set to hidden, if it is remove the value.
检查溢出设置是否设置为隐藏，如果是删除值。
.banner {
overflow: hidden // remove
}
回答by farjam
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
这个问题实际上是由于最顶部的图像（云的图像）被设置为绝对位置和高 z-index。谢谢大家的帮助。
