Question

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

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.没有z-index和位置的div.background，带有z-index -1的div.dropdown（此处下拉列表位于标题后面但菜单链接停止工作，菜单也位于网页的主要内容之后）

如何使div.dropdown从标题栏后面滑动，背景和边框底线？是不是可以将头部div树中的div.dropdown作为后代元素。

Answer 1

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

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

Answer 2

这可能是负z指数;但是，它不适用于具有非自动z-index的父元素。将join元素设置为.background（或者将其取下。z-index:auto是默认值）。可以（和推荐的imo）使用具有正z-index的祖先元素，以避免负z索引元素降至auto或<html>元素以下。在这种情况下，你做（<body>的z-index为5），所以没关系。

＆＃13;

header

＆＃13;

Answer 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>

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

3 个答案: