Невозможно щелкнуть компоненты фона, потому что верхняя граница индекса z-индекса распределена горизонтально

Question

У меня есть 3D-холст с z-index: -1 Я хочу отображать компоненты по z-индексу: 0 и иметь возможность щелкнуть 3D-холст без каких-либо проблемы. К сожалению, когда я добавить компонент А до Z-индекс: 0 запас этого компонента распространяется по горизонтали и я не могу нажать 3D Canvas один в левую и правую сторону компонента А.

.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/