[CSS] a태그를 다른 요소가 가릴 때 사용하면 유용한 pointer-events

문제

<div class="wrap">
    <a href="#">
        <img src="..." alt="...">
    </a>
    <div class="tab">
    </div>
</div>

위와 같은 코드가 있다고 하자. 이미지를 감싼 a태그가 하나 있고, 이 a태그에는 형제 요소로 div가 하나 있다.

표현하고 싶은 것은 a태그 위에 div를 absolute시켜서 올리려고 한다. a태그 안에 div를 넣는 방법도 있긴 하지만, 만약 a태그와 별개로 다른 요소가 a태그 위에 올려지길 원한다면 어떻게 해야 할까?

 

그대로 absolute하여 올린다면 a태그가 div에 가려져 그 부분은 클릭이 안 되는 불상사가 생길 수도 있다.

그렇다고 z-index로 우선순위를 내리면 div가 보이지 않는다. 이럴 때는 간단히 클릭 요소만 제어할 수 있는 pointer-events 속성을 사용해보자.

 

방법

.wrap {
    position: relative;
}
.wrap div {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

pointer-events의 기본값은 auto이다. 따라서 none으로 바꿔주면 a태그 위에 올라가 가리고 있지만, 클릭 부분은 마치 div가 투명이 된 것처럼 밑에 있는 a태그가 클릭된다. 

 

a[href="http://..."] {
    pointer-events: none;
}

pointer-events는 위에서 요소가 투명화되어 밑에 있는 링크가 클릭되게 하는 효과다라고 거창하게 말했지만, 사실 쉽게 말하면 포인터 이벤트(클릭, 드래그, 호버)를 비활성하는 속성이다.

따라서, 위 코드처럼 특정 주소를 가지는 a태그는 pointer-events:none으로 클릭 이벤트를 비활성화시킬 수도 있다.

 

1. pointer-events: none;
2. 주로 포인터 이벤트를 가지는 요소를 다른 요소가 가릴 때, 그 가리는 요소에 사용하면 좋다.