z-index 를 활용하여 겹침 문제 해결하기

개인 프로젝트를 진행하다가 컴포넌트 겹침 문제로 링크 클릭이 되지 않아 애를 먹은 기억이 있다.

 

나는 해당 컴포넌트를 클릭하면 링크를 타고 다른 페이지가 열리도록 코드를 작성했는데 배경으로 만든 컴포넌트가 위에 있다고 인식되어 원하는 컴포넌트가 아닌 배경 컴포넌트가 클릭되는 현상이 생겼었다.

 

아래 사진이 문제 해결 전 마우스 커서가 배경 컴포넌트 위에 있다고 인식될 때의 화면이다.

 

아래 사진은 문제 해결 후 마우스 커서가 해당 이미지 컴포넌트 위에 있다고 인식될 때의 화면이다.

 

이러한 문제를 해결하기 위해서 z-index 라는 개념을 찾아서 활용하였다.

 

사실 이때까지는 배경에 컴포넌트를 둘 일이 없어서 고민해보지 않은 문제였는데, 많은 컴포넌트를 담고 있는 화면을 만들어야 할 일이 생긴다면 꼭 z-index도 고려해야 된다는 사실을 알 수 있었다.

 

 

z-index 사용법

 

z-index 는 아무 컴포넌트에나 사용한다고 우선순위가 부여되지는 않는다.

가장 우선되는 필요조건은 해당 영역의 position이 static이면 안된다는 것이다.

 

z-index의 우선순위는 z-index 값이 높을수록 높은 순위가 된다.

예를 들어 z-index : 1 인 컴포넌트 A와 z-index : 2 인 컴포넌트 B가 있으면 컴포넌트 B가 위에 그려진다.

 

이 두가지를 고려하면서 z-index 값을 부여해 주었다.

 

z-index에 음수 값을 부여하자.

 

나는 웹페이지를 만들 때 배경 위에 모든 컴포넌트를 올려두었다. 그리고 보통의 경우들은 이럴 거라고 생각한다.

 

하지만 클릭 등의 문제로 어떠한 컴포넌트를 배경 밑으로 두고 싶은 경우도 있을 수 있다.

 

이럴 때는 z-index에 음수 값을 부여하면 된다.

 

z-index 값이 음수가 되면 배경의 뒤로 들어가게 되고 만약 배경이 #FFFFFF 라면 화면에서 사라진 것처럼 나올 것이다.

 

이를 활용하여 웹 페이지를 만들 때 활용해도 좋을 것 같다.