Question

我有一个带有CSS下拉导航菜单的网页。我的问题是，当我将鼠标悬停在菜单顶部以显示下拉列表时，页面中的其他所有内容都会移动以为下拉列表腾出空间，而不是移动到其他所有内容的下拉列表。我的导航链接位于一个id为“header”的div元素中，我的CSS元素如下所示：

#header {
    width: 100%;
    z-index: 100;
    position: relative;
}

页面中没有移动的元素都在标题内，而非元素中的元素都指定了z-index。谁能告诉我我做错了什么？

Answer 1

将position更改为absolute并制作父容器position的{{1}}。

或者，在相反的方向上，在relative内创建另一个容器并将所有内容填入其中。

关键是内部元素需要绝对定位，但与其父元素相关。因此相对地定位父母。

Answer 2

您需要将position: absolute添加到将鼠标悬停在菜单按钮上时显示的子菜单中。