[CSS] z-index 속성

z-index란?

 

객체를 원하는 순서대로 배치할 수 있는 기능으로 몇 가지 특성을 가집니다.

 

1. position 속성이 relatuve 거나 absolute 일 때 동작합니다.
2. 기본값은 auto이며 음수, 양수의 숫자를 사용할 수 있습니다.
3. z-index 의 값인 숫자가 높을 수록 가장 상단(보이는 화면에서 가깝게)에 배치되며 낮을 수록(보이는 화면에서 멀게) 배치됩니다.
4. z-index는 같은 선상에 있는 태그값부터 확인하지만 부모 태그의 z-index가 우선이기 때문에 자식 태그가 z-index 숫자가 크더라도 부모 태그의 값을 우선시합니다.

---

활용 예제를 알아보기 위해 아래와 같이 3개의 div 에 style 을 부여했습니다.

이 중 두번째, div_2 를 가장 앞으로 나오게 하고 싶을 때 z-index 값을 부여하면 됩니다.

다른 div 에는 z-index 값이 부여 돼 있지 않아 z-index: 1 만 주어도 가장 상단에 위치하는 걸 확인할 수 있습니다.

 

만약 이 상태에서 첫번째인 div_1 을 가장 앞으로 나오게 하려면 1 보다 큰 숫자를 부여하면 됩니다.