使用 z-index 的 CSS 不会将子元素放置在其父元素后面

Question

我正在尝试制作一个从标题滑动的下拉菜单。我有一个标题，里面有一些带有边框底部 1px 线和背景颜色的 div。在此 div 内，我想放置徽标、搜索框、一些链接和用户个人资料按钮。单击此按钮时，我想在此按钮下方显示下拉菜单。不幸的是，这个下拉菜单出现在标题前面，而不是从标题后面滑动（遮挡标题背景和底部边框线）。我尝试过如下解决方案（它是简化版本）。

header {
  position: relative;
  z-index: 5;
}

.dropdown {
  background-color: yellow;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
}

.background {
  position: absolute;
  background-color: #ccca;
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;
  z-index: 2;
}

<header>
  <div class="background">
    <div class="dropdown">
    </div>
  </div>
</header>

我尝试了很多 z-index 配置，但似乎都不起作用。1. div.background 的 z-index 为 2，div.dropdown 的 z-index 为 1 甚至 -1 2. div.background 没有 z-index 和位置，div.dropdown 的 z-index -1（此处下拉列表位于标题后面但菜单链接停止工作，菜单也位于网页主要内容的后面）

如何使我的 div.dropdown 从标题栏后面滑动，并带有背景和边框底线？是否可以将此 div.dropdown 作为子元素放在 header div 树中。

Answer 1

z-index 基于 DOM 中同一级别的元素，换句话说，具有相同父级的元素。

由于您的class="dropdown"元素是该元素的子class="background"元素，因此它永远不能低于其父元素。