Html 覆盖正在阻止链接

我有一个相当大的问题。我在一个网格上工作，到目前为止有如下情况：

我正在本地主机上制作代码，必须将代码复制/粘贴到CMS系统。添加代码时，我必须单击一个小工具图标：

问题是我无法点击该图标，因为很明显覆盖层覆盖在可点击图标上。如果我更改以下内容，它将起作用：

.overlay {
    opacity:0;
  }

到

但是在网格元素上有一个恒定的覆盖，这不是它的意思

有人知道这方面有什么创造性的解决办法吗

。图像覆盖{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
过渡：全部。3秒轻松；
不透明度：0；
过渡：1.9秒；
背景：#00b1bab8；
}
.图像覆盖：悬停.覆盖{
不透明度：1；
}
.覆面{
背景：rgba（27,27,27,0.5）；
排名：0；
底部：0；
左：0；
右：0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
颜色：#fff；
字体大小：15px；
左侧填充：35px；
右边填充：35px；
}

只需添加z索引即可

.overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
    z-index:0;
  }

---

指针事件：无

可能是您的解决方案，请参见，

不透明度：0%

不会使元素仅在视觉上对单击不可见。或者使用

z-index:

将图标提升到覆盖层上方。我无权在图标中进行编辑。

指针事件：无类使另一个框无法打开：-/您可以将css添加到系统中吗？理论上，如果您可以添加自己的css，您应该能够针对任何对象？包括图标。请在问题本身中提供答案。我可能很难从整个网页上确定问题。此外，将问题降低到一个较小的可重复问题可能会导致您找到解决方案。
.overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
    z-index:0;
  }