CSS - 如何在除了彼此之外的所有内容上重叠元素？ （没有保证金/填充等）

Question

我正在创建一个导航栏，我希望它有纯CSS下拉菜单，这个问题是，为了使它们不与页面的其余部分重叠，你必须将它们设置为position: absolute但是这会导致所有链接占用相同的空间。赋予它们单独的边距将使它们分离，但是当它们占据相同的虚拟空间时，只有最后一个链接实际上是可点击的。

HTML：

    <div id="navbar">
        <ul>
            <a href="index.html" class="navbutton" id="navbuttonselected">Home</a>
            <a href="about.html" class="navbutton">About Me</a>
            <div id="programs">
                <a href="programs.html" class="navbutton">Programs</a>
                    <li><a class="navbutton" style="margin-top:0px;">Test</a></li>
                    <li><a class="navbutton" style="margin-top:62px;">Test 2</a></li>
                    <li><a class="navbutton" style="margin-top:124px;">Test 3</a></li>
                    <li><a class="navbutton" style="margin-top:186px;">Test 4</a></li>
            </div>
        </ul>
    </div>

CSS：

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

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

Answer 1

好吧，我想我可能已经解决了这个问题。我所做的就是在.navbutton元素中添加一个z-index为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 */
}

我希望有帮助： - ）

Answer 2

您正在寻找z-index。

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