无法单击背景组件，因为上z-index div边距水平展开

Question

我有带有z-index的3d画布：-1 我想在z-index：0上显示组件，并且能够毫无问题地单击3d画布。不幸的是，当我将组件A添加到z-index时：此组件的0边距水平扩展，我无法在组件A的左侧和右侧单击3d画布。

.background-3d-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: silver;
}
    
.front-component {
    background-color: blue;border-radius: 10px;
    padding: 20px;
    margin: auto;
    width: 300px;
    background-color: blue;
}

<div class="background-3d-canvas">
    <a href="#">Test</a><br/>
    <a href="#">Test2</a><br/>
    <a href="#">Test3</a><br/>
    <a href="#">Test4</a><br/>
    <a href="#">Test5</a><br/>
    <a href="#">Test6</a><br/>
</div>
    
<div class="front-component">
   Editor
</div>

我创建了jsfiddle来演示这个问题。并非所有链接都是可点击的。

https://jsfiddle.net/ec5uuthy/

Answer 1

您可以将这些属性添加到.front-component：

  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;

https://jsfiddle.net/76bpqge1/