在角度应用中在父母的下一个兄弟后面的父母的悬停上显示绝对定位的div（宽度大于父级）

Question

我有三个div，每个div有两个子元素，在第一个孩子的悬停时，应显示第二个孩子（隐藏和绝对定位）。这可能看起来很简单。但由于第二个子元素是绝对定位的，它将落后于父元素的下一个兄弟元素。

我已经尝试过各种方式，比如动态添加z-index。但没有表现。我想只使用CSS。

.wrapper{
		width: 100%;
		display: flex;
	}
	.div{
		margin: 0em 1em;
		position: relative;
	}
	.divIn{
		width: 190px;
		height: 260px;
		background: red;
	}
	.divHover{
		display: none;
		position: absolute;
		left: 0%;
		bottom: 2em;
		width: 500px;
		height: 100px;
		background: black;
	}
	.divIn:hover ~ .divHover, .divHover:hover{
		display: block;
	}
	.clearfix{
		clear: both;
	}

	<div class="wrapper">
		<div class="div">
			<div class="divIn"></div>
			<div class="divHover"></div>
		</div>
		<div class="div">
			<div class="divIn"></div>
			<div class="divHover"></div>
		</div>
		<div class="div">
			<div class="divIn"></div>
			<div class="divHover"></div>
		</div>
		<div class="clearfix"></div>
	</div>

当第一个元素悬停时，应该显示隐藏的第二个元素，但它不应该在父元素的下一个兄弟之后。

Answer 1

如果您期望解决方案作为父div的第二个子节点在父节点的下一个兄弟之上添加z-index到类“divHover”。

.divHover {z-index：9;}

Answer 2

通过将此添加到CSS解决：

.div:nth-child(1) {
  z-index: 3;
}
.div:nth-child(2) {
  z-index: 2;
}
.div:nth-child(3) {
  z-index: 1;
} 

说明：

通常情况下，元素按它们在DOM中出现的顺序堆叠（同一层次级别的最低层显示在顶部），因此第二个.div位于第一个顶部。这就是.divs落后于他们下一个兄弟姐妹的原因。

当你为第一个z-index的孩子.divHover设置.div到更高的值时，它仍然是第一个.div的孩子，它低于第二个.div，所以你想要的效果不会发生。

要解决它，你需要将第一个.div放在第二个顶部。在这里查看示例CSS Tricks