javascript - Chrome 不透明度过渡 z-index 问题

Question

我正在开发一个 Angular 应用程序，但在向导航项添加“.active”类时遇到问题。

这是一个演示问题的 stackblitz 链接:

https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css

基本上，当我单击一个框时，它会缩放但会显示下一个框的一部分，几乎就像事件框是透明的一样。我的事件类的 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;
}

被点击的元素看起来好像具有不透明度 <1 的原因是下一个元素实际上在它的“上方”，同时具有 opacity: 0.5;。 “在它之上”是指下一个元素位于 DOM 树的更下方，因此具有比前一个(当前单击的元素)更高的堆叠顺序。