css z-index，内容显示在彼此之后

Question

我遇到z-index问题。我有几个div位于彼此之上，在其中div有一些内容显示在mouseover上。此内容当前显示在父div之后。

父div有一个z-index: 2，因为它们需要显示在父母的上方。

<div class="activity-display"><!--parent div z-index: 2-->
  <a href="#">Running</a><!--This is displayed on hover underneath its parent div, but gets hidden underneath the below activity-display-->
</div>
<div class="activity-display">
  <a href="#">Running</a>
</div>

我尝试向锚点添加更高的z-index，但这并没有解决问题

非常感谢任何帮助

Answer 1

使用z-index属性时，必须定位元素。将a代码更改为position:absolute。

Answer 2

您至少应该使用z-index相对位置来提供您想要使用的元素，因为z-index不适用于static位置。除了默认位置之外，其他任何工作都可以。

您也不需要重新排列子元素或父元素，因为子元素将始终位于父元素之上。换句话说，子元素将始终具有相对于父元素的z-index + 1。

Answer 3

请小提琴，以便我们可以提供帮助。

另外，请记住一些要点，z-index适用于元素position absolute。