如何获得一个下拉菜单来覆盖其他元素答案

【问题标题】：How to get a drop-down menu to overlay other elements如何获得一个下拉菜单来覆盖其他元素
【发布时间】：2015-06-26 06:28:17
【问题描述】：

我正在创建一个小网站，当我将鼠标悬停在“图库”按钮上时，我无法获得下拉菜单来覆盖菜单下方的段落，而不是向下推整个内容.我已经尝试过position: relative; z-index: 9999; 的所有组合。但是，当我为 <ul> 元素设置 position: absolute; 时，它实际上可以工作，但会弄乱 <ul> 项目的所有布局。请帮我完成这件事，因为我开始头疼了……Here's my code。当您将鼠标悬停在“图库”按钮上时，您可以看到段落是如何下降的。我希望段落保持原样，并且下拉菜单覆盖它。

【问题讨论】：

标签： html css menu position overlay

【解决方案1】：

首先将父元素定位为relative，使其为绝对定位的后代establish a new containing block：

.menu-item {
    width: 33.33%;
    float: left;
    position: relative; /* <-- added declaration */
}

然后，绝对定位嵌套的<ul>，添加top、left 偏移量以及width：

Example Here

.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;
}

【讨论】：

这真是一个奇迹！你节省了我几个小时的时间！谢谢！我所需要的只是left: 0; top: 100%; width: 100%; 属性！再次感谢！！！
您能否告诉我为什么top: 100% 属性使<ul> 很好地布局在<a> 元素下？从第一个想法开始，它似乎应该使 <ul> 出现在其容器的顶部边缘附近，但幸运的是事实并非如此，因为我需要它就在 <a> 元素下方。
@Salivan 当然。对于绝对定位的元素——它们的位置值为absolute 或fixed——top property 指定元素的上边距和元素包含块的上边距之间的距离。 top 上的百分比值也相对于包含块的 height。因此，通过将top 设置为100%，我们可以确保元素将位于包含块下方。
如果我理解正确，通过将top 属性设置为 100%，我们会强制元素与其容器之间的间隙尽可能大，因为 100% 意味着间隙应该是容器的全高。对吗？
非常感谢！我感谢那些不拒绝为他人付出几秒钟时间的人。

【解决方案2】：

你需要为你的 .menu-item 设置一个相对位置

position: relative;

现在您可以将 ul 设置为 absolute 位置，而不会弄乱您的布局。

这是您的 fiddle 的更新版本

【讨论】：

但是我可以清楚地看到一个混乱的布局。你确定你的解决方案吗？
我不知道你是什么意思，除了ul，布局还是一样的。您需要对其进行样式设置。
是的，我的意思是在设置position: absolute; 属性后<ul> 的布局混乱了。 @Hashem Qolami 只是给了我我真正需要的东西。抱歉，他的例子稍微好一点，但也谢谢你！
是的，这就是整个诀窍。很长时间以来，我一直在尝试设置它的样式，因为这是我使用 CSS 的第二天，但他只是向我展示了最简单、最清晰的方法。

【解决方案3】：

这不适用于框架构建..

示例：您有两个框架顶部，其中包含内容，并且顶部框架上有一个 CSS 下拉菜单。当您进入菜单时，在内容页面的前面看不到子菜单。

【讨论】：