div(레이어) 밑의 객체를 클릭 가능하게 하는 방법

기본적으로 HTML에서 DIV밑의 DOM 객체를 클릭할 수 없습니다.

만약 워터마크를 표시하기 위해서 position:absolute; z-index: 9999 등을 사용해서 DIV를 맨 앞으로 빼서 화면을 덮었다면 아래 객체들을 하나도 클릭할 수 없는 문제가 발생합니다.

이 경우 간단하게 아래 CSS를 통해 문제를 해결할 수 있습니다.

pointer-events:none;

 

pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정합니다.

이 CSS 속성의 브라우저 지원 상황은 다음과 같습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events

 

 

이 속성의 자세한 내용을 확인하려면 여기를 클릭하시면 됩니다.