z-index가 높은 요소가 다른 요소 위에 놓이면 해당 요소 위의 요소를 가리게 되므로, display:none으로 설정했더라도 클릭 이벤트가 전달되지 않을 수 있습니다.
Super-Sub 관계가 아닌 경우
다음과 같이 z-index값 때문에 btn이 overlay 요소 아래에 위치하는 경우,
<div class="container">
<div class="overlay"></div>
<button class="btn">클릭하세요</button>
</div>.container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:none; /* 보이지 않음 */
z-index: 100; /* 다른 요소 위에 위치 */
pointer-events: none; /* 다른 요소에 이벤트 전파 중단 */
}
.btn {
position: relative;
z-index: 50; /* overlay 요소 아래 위치 */
/* 다른 스타일 및 내용 추가 */
}이렇게 하면 overlay에 pointer-events:none을 주면 overlay 요소가 다른 요소를 가리고 있어도, 버튼을 클릭할 수 있게 됩니다.
즉 pointer-events 속성은 적용된 요소의 '포인터', 즉 클릭 이벤트를 비활성화하고 밑에 있는 요소에 클릭 이벤트를 전달합니다. 즉, overlay 요소가 실제로 클릭되지 않도록 하며 밑에 있는 요소를 클릭하도록 허용하는 구조입니다.
주의할 점
이 속성이 설정되어 있어도 키보드 이벤트 (포커스, 블러, 클릭 등)는 여전히 발생할 수 있습니다. 예를 들면 TAB 키를 사용하여 요소를 탐색하는 경우가 있습니다.
Super-Sub 관계인 경우
<div id="parent">
<button id="child-1">Foo</button>
<button id="child-2">Bar</button>
</div>
#parent { pointer-events: none; }
위와 같이 #parent 요소에 pointer-events: none; 속성을 지정하면, 버튼 요소인 #child-1 및 #child-2는 명시적으로 pointer-events: none;이 설정되지 않았더라도 어떤 버튼을 클릭하더라도 아무런 반응이 없을 것입니다. 부모 요소인 <div>가 모든 포인터 이벤트를 차단하기 때문에 자식 요소 또한 포인터 이벤트를 받지 못하게 됩니다.
이 경우, 자식 요소에 pointer-events: auto; 속성을 지정하여 자식 요소에 포인터 이벤트를 허용하도록 수정할 수 있습니다.
<div id="parent">
<button id="child-1">Foo</button>
<button id="child-2">Bar</button>
</div>
#parent { pointer-events: none; }
#child-1 { pointer-events: auto; }pointer-events: auto;를 자식 요소에 적용하면 자식 요소는 다시 포인터 이벤트를 받을 수 있습니다. 부모 요소에 pointer-events: none;이 설정되어 있더라도 자식 요소가 명시적으로 포인터 이벤트를 활성화한 경우에 한해 이를 허용하는 구조입니다.
