上部Z-インデックスのdivマージンが水平方向に広がっているため、背景のコンポーネントをクリックできません

Question

z-indexの3Dキャンバスを持っています：-1 z-indexにコンポーネントを表示する：0と、問題。残念ながら、私は、zインデックスにA成分を追加するとき：このコンポーネントの0マージンが水平に広がっていると私は三次元のキャンバス1に成分Aの左側と右側をクリックすることができないんだ

.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成分：

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

https://jsfiddle.net/76bpqge1/