css - dropdown 移动下的所有内容吗？

Question

我有一个将显示一些内容的下拉菜单。

<ul class="menus" style="">
    <li>hey</li>
</ul>

这是CSS:

.menus {
    width: 607px;
    background-color: white;
    border-bottom: solid 1px #9f9f9f;
    border-left: solid 1px #9f9f9f;
    border-right: solid 1px #9f9f9f;
    bottom: 20px;
    margin: 0;
    position:relative;
}

.menus li {
    list-style: none;
    display: block;
    padding: 15px;
    border-bottom: solid 1px #d6d6d6;
}

.menus li:hover {
    background-color: #71bfdb;
    color: white;
    border-bottom: solid 1px #3fb7d3;
    border-top: solid 1px #3fb7d3;
    text-decoration: none;
}

.menus li a:hover {
    text-decoration: none;
}

每当下拉菜单打开时，所有内容都会移动到底部，具体取决于列表的长度。

问题

我该如何防止这种情况发生？ 如果我将位置设置为绝对位置，整个下拉菜单将变得疯狂，就像移动位置一样，而不是我想要的。

Answer 1

使用position: absolute 将其从页面流中移除(relative 表示它仍在页面流中，这就是导致它在之后推送内容的原因下来)。

您可以使用 top、bottom、left 和 right 更改绝对定位元素的显示位置> css 属性(即 top: 0px; left: 10px;)。这些像素值是相对于具有 position: relative 的第一个父元素的，因此如果您相对定位父元素，应该很容易将其显示在页面上的适当位置。

这应该可以解决您对绝对定位导致它像您所说的那样“发疯”的担忧!