위 z- 인덱스 div 여백이 가로로 퍼져 있기 때문에 배경 구성 요소를 클릭 할 수 없습니다.

Question

저는 z- 인덱스가있는 3D 캔버스가 있습니다. -1 z- 인덱스에 구성 요소를 표시하고 싶습니다. 0을 입력하고 아무 것도 선택하지 않고 3d 캔버스를 클릭 할 수 있습니다. 문제. 불행하게도, 난 Z- 인덱스에 부품 A를 추가 할 때 :이 구성 요소의 0 마진이 수평으로 확산되고 나는 3D 캔버스 하나를 구성 요소 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/