CSS z-index 사용방법 (우선순위)

HTML 을 작성하다 보면 태그들이 서로 겹치는 경우가 있다.

 

ex)

default 이런 경우...

HTML 에서는 나중에 배치된 것이 화면상에서 제일 위로 오게 되는데,

이때, z-index를 사용하여 뒤에 있는 태그를 끌어올릴 수 있다.

​

보라색을 맨위로 끌어보자

.base > div:nth-child(4){ 
  width:100px; 
  height: 100px; 
  background-color:purple; 
  position: absolute; 
  border-radius: 50%; 
  top: 90px; 
  left: 150px; 
  z-index: 1; 
}

다른 코드는 무시하고 맨 밑에 있는 z-index: 1; 에 주목하자.

이 옵션은 겹쳐질 경우 우선순위 레벨을 설정하여 배치된 순서에 상관없이 위로 끌어올릴 수 있다.

​

위 코드에서는 보라색(background-color:purple;)에 z-index:1; 을 적용했다.

​

결과:

보라색 z-index:1;

z-index 를 따로 설정하지 않으면 0이 기본값이다.

보라색 div 는 다른 div 보다 우선순위(z-index)가 높으므로 맨위에 올라왔다.

​

이 상태에서 초록색​을 맨위로 올려보자.

.base > div:nth-child(2){ 
  width:100px; 
  height: 100px; 
  background-color:green; 
  position: absolute; 
  border-radius: 50%; 
  top: 50px; 
  left: 50px; 
  z-index: 2; 
}

초록색 div 의 속성이다. 이 부분도 z-index: 2; 만 보자

보라색 div 의 z-index 레벨은 1이지만

초록색은 이 보다 1 더 높다.(2)

그러므로 보라색 보다 초록색이 우선적으로 화면에 표시된다.

​

결과:

초록색 z-index: 2 보라색 z-index: 1

(우선순위가 적용되는 것을 확인하기 위해 보라색 div 를 좌측으로 약간 땡김)

​

이렇게 z-index 값이 높을 수록 위로 배치가 된다.

만약 같은 레벨이라면 나중에 배치된 것이 우선적으로 표시된다.