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的第一个父元素，因此如果您相对定位父元素，则应该很容易将其显示在页面上的适当位置。

这应该解决你对绝对定位的担忧，导致它像你说的那样“疯狂”！

下拉移动下面的所有内容？

1 个答案: