Html 如何获取下拉菜单以覆盖其他元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29732488/
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
How to get a drop-down menu to overlay other elements
提问by Salivan
I am creating a little website and I can't get the drop-down menu, which comes out of the "gallery" button when I hover on it, to overlay the paragraph below the menu instead of pushing the whole content down. I've already tried every combination of position: relative; z-index: 9999;. However, when I set position: absolute;for the <ul>element it actually works, but messes up all the layout of <ul>items. Please help me to get this done because I'm starting to bump my head... Here's my code. You can see how the paragraph goes down when you hover on the "gallery" button. I wish the paragaph stayed where it is and the drop-down menu overlayed it.
我正在创建一个小网站，但无法获得下拉菜单，当我将鼠标悬停在“图库”按钮上时，它无法覆盖菜单下方的段落，而不是将整个内容向下推。我已经尝试了position: relative; z-index: 9999;. 但是，当我position: absolute;为<ul>元素设置时，它确实可以工作，但会弄乱<ul>项目的所有布局。请帮我完成这件事，因为我开始撞头了……这是我的代码。当您将鼠标悬停在“图库”按钮上时，您可以看到段落是如何下降的。我希望 paragaph 保持原样，下拉菜单覆盖它。
回答by Hashem Qolami
First position the parent element as relativeto make it establish a new containing blockfor absolutely positioned descendants:
首先定位父元素relative，使其为绝对定位的后代建立一个新的包含块：
.menu-item {
width: 33.33%;
float: left;
position: relative; /* <-- added declaration */
}
Then, position the nested <ul>absolutely, add top, leftoffsets as well as width:
然后，<ul>绝对定位嵌套，添加top，left偏移量以及width：
.menu-item ul {
margin-top: 5px;
list-style-type: none;
height: 0px;
overflow: hidden;
position: absolute; /* <-- added declarations */
left: 0; top: 100%; /* here */
width: 100%; /* and here... */
transition: height 1s ease;
}
回答by slashsharp
回答by Salih
This does not work on frame builds..
这不适用于框架构建..
Example: you have two frames top with content in them and you have got a CSS dropdown menu on the top frame. When you come on the menu, the sub menu is not seen in front of the content page.
示例：您有两个顶部带有内容的框架，并且顶部框架上有一个 CSS 下拉菜单。当您进入菜单时，在内容页面前面看不到子菜单。
