Css 具有相对定位元素的Z索引

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

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

---

页面中所有正在移动的元素都不在标题内，并且没有指定z索引。有人能告诉我我做错了什么吗？

将

位置更改为
绝对位置
，并将父容器的
位置设置为相对位置

或者，在相反的方向上，在
#header
中创建另一个容器，并将所有内容填充到其中

关键的一点是，内部元素需要绝对定位，但要相对于其父元素。因此，相对定位家长
 您需要将
position:absolute
添加到当您将鼠标悬停在菜单按钮上时显示的子菜单中

有关教程，请参见此处：

同样相关：
根据我的理解，
#header
是“父容器”。好的，那么它的子容器就完全定位了。答案很一般，可以考虑任何一种方式。这是可行的，但为什么我需要使用绝对位置？我理解该规范的意思是，z-index将适用于绝对或相对定位的元素。这是错的还是我只是误解了？这不是z-index的问题。您需要
position:absolute
从正常文档流中删除子菜单。例如：