Question

我正在处理一个有角度的应用程序，而且在添加＆＃39; .active＆＃39;时遇到问题。类到导航项目。

这是一个展示问题的stackblitz链接：

基本上，当我点击一个框时，它会缩放，但下一个框的一部分正在显示，几乎就像活动框是透明的一样。我的活动类的z-index为1，不透明度为1。

在Firefox上，这似乎不是问题。此外，我之前使用相同的技术做了类似的事情（但没有任何框架）。这个link将向您展示该项目的一个示例。

我不确定我做错了什么，或者它是否是Chrome问题。我感谢任何反馈。

编辑：刚刚查看Edge，同样的问题就在那里。到目前为止，似乎Firefox是唯一不存在此问题的浏览器。

Answer 1

只需将position:relative添加到.section a或.active

即可

如：

.section a {
  display: block;
  width: 120px;
  height: 80px;
  opacity: .5;
  transition: all .5s;
  position:relative;
}

点击元素看起来好像它具有不透明度＆lt; 1的原因是下一个元素实际上是“高于”它，而opacity: 0.5;。通过“在它上面”我的意思是下一个元素在DOM树的下方，因此具有比前一个（当前被点击的一个）更高的堆叠顺序。