logo标签列表

CSS使用z-index无法将子元素置于父元素后面

htmlcss
5
我想制作一个从标题栏滑出的下拉菜单。 我有一个标题栏，里面有一些带有底部边框1像素线和背景颜色的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和position，div.dropdown使用z-index为-1（这里dropdown在header后面，但菜单链接无法使用且菜单也在网页主内容之后）
如何让我的div.dropdown从header栏后面滑出，并带有背景和底部边框？是否可以将此div.dropdown放在header div树内作为后代元素。
3个回答
2
这是通过负z-index实现的，但是它与具有非自动z-index的父元素不兼容。将.background元素设置为具有z-index:auto（或者删除它，因为auto是默认值）。建议您使用具有正z-index的祖先元素，以避免负z-index元素降至<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>

1

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

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

如果父级元素具有非auto/static的z-index，则带有负z-index的子级只能位于父级下方。 - Caleb Taylor
0

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

我必须在我的头部（Angular 2组件）中添加{ display:block }，以便当div.dropdown的z-index等于-1时，<a href=""></a>链接重新开始工作。 - Michał Ziobro
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接