css - 不同位置的下拉可见性

Question

我有一个下拉列表，但是出现了一个问题，我无法理解依赖关系。由于z-index的数量较多，菜单打开不可见，但是如果我给菜单加上absolute定位，菜单就变得可见了。但是，据我所知，z-index 应该与 relative 定位一起使用。你能解释一下为什么使用 absolute 定位时我看到了菜单，而使用 relative 时却看不到菜单。

Answer 1

当您使用 position:relative 时，下拉列表的可见性也取决于其父容器 z-index。例如:

<header style="z-index:0;position:relative"> 
  <nav style="z-index:2;position:relative"> </nav>
</header>
<main style="z-index:1;position:relative">
</main>

nav 下拉菜单将被容器覆盖，因为“header z-index”<“ma​​in z-index”。

当您应用 position:absolute 时，绝对元素脱离了正常的文档流并且不依赖于其父级 z-index。