Html CSS-如何在所有元素上重叠，但不能相互重叠？（无空白/空白等）

我正在制作一个导航栏，我希望它有纯CSS下拉菜单，问题是为了使它们不与页面的其余部分重叠，您必须将它们设置为

位置：绝对

，但是这会导致所有链接占用相同的空间。给他们单独的页边距会给他们留出空间，但当他们占据相同的虚拟空间时，只有最后一个链接是可以点击的

HTML:

有没有办法让它们彼此重叠，这样链接就可以点击，但不会将整个页面向下移动？最好是没有JQuery/Javascript的解决方案。谢谢

您正在寻找的

顶部
中间的
底部

好的，我想我可能已经解决了这个问题。我所做的只是在.navbutton元素中添加一个z索引1，它就成功了。我没有修改所有其他css

   .navbutton
{
    color:#BBBBBB;
    text-align:center;
    font-size:18px;
    display:inline-block;
    width:120px;
    height:45px;
    padding-top:17px;
    transition:all 0.3s;
    position:relative;
    z-index: 1; /* this is the rule too add */
}

---

我希望这有帮助：-）

您的标记已损坏。无序列表（ULs）必须由列表项（LIs）组成。您可能需要使用嵌套列表：

1
2.1
2.2
3

我不敢相信解决方案这么简单。非常感谢，现在我不必使用任何JavaScript了！

#navbar
{
    border-bottom: 1px solid #00A2E8;
}

.navbutton
{
    color: #BBBBBB;
    text-align: center;
    font-size: 18px;
    display: inline-block;
    width: 120px;
    height: 45px;
    padding-top: 17px;
    transition: all 0.3s;
    position: relative;
}

#programs
{
    display: inline-block;
}

#programs > li
{
    display: none;
    list-style-type: none;
}

#programs:hover > li
{
    display: block;
    position: absolute;
}

<div style="z-index: 1;">Top</div>
<div style="z-index: 0;">Middle</div>
<div style="z-index: -1;">Bottom</div>

   .navbutton
{
    color:#BBBBBB;
    text-align:center;
    font-size:18px;
    display:inline-block;
    width:120px;
    height:45px;
    padding-top:17px;
    transition:all 0.3s;
    position:relative;
    z-index: 1; /* this is the rule too add */
}