无法单击背景组件，因为上 z 索引 div 边距水平分布

Question

>我有带有z索引的3d画布：-1我想在 z-index： 0 上显示组件，并且能够毫无问题地单击 3d 画布。不幸的是，当我将组件 A 添加到 z 索引时：该组件的 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/