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

【问题标题】：CSS using z-index doesn't place child element behind its parent使用 z-index 的 CSS 不会将子元素放在其父元素后面
【发布时间】：2017-12-07 02:02:14
【问题描述】：

我正在尝试制作一个从标题滑动的下拉菜单。我有一个标题，里面有一些带有边框底部 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. z-index 为 2 的 div.background，z-index 为 1 甚至 -1 的 div.dropdown 2. 没有 z-index 和位置的 div.background，带有 z-index -1 的 div.dropdown（这里的下拉菜单在标题后面，但菜单链接停止工作，菜单也在网页的主要内容后面）

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

【问题讨论】：

标签： html css

【解决方案1】：

这可以通过负 z-index 实现；但是，它不适用于具有非自动 z-index 的父元素。将.background 元素设置为具有z-index:auto （或者将其删除。auto 是默认值）。可以（并且推荐 imo）有一个具有正 z-index 的祖先元素，以避免您的负 z-indexed 元素低于 <html> 或 <body> 元素。在这种情况下，您可以这样做（header 的 z-index 为 5），所以没问题。

<html>
<head>
<style type="text/css">
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: auto;
}
</style>
</head>
<body>
<header> 
	<div class="background">
		<div class="dropdown">
		</div>
	</div>
</header>
</body>
</html>

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果父级具有非自动/静态 z-index，则具有负 z-index 的子级只能位于父级之下

【解决方案3】：

子元素不能显示在其父元素之下。像这样让两个 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;
}

<html>
<head>
</head>
<body>
<header> 
  <div class="background"></div>
  <div class="dropdown"></div>
</header>
</body>
</html>

【讨论】：

我必须将 { display:block } 添加到我的标题（角度 2 组件）中，以便在 div.dropdown 具有 z- 时链接再次开始工作索引等于 -1