1. 개요
요소의 z축 방향의 깊이를 결정하는 속성.
이때 z-index 속성은 position이 static으로 되어있으면 동작하지 않는다.
값은 양수, 음수, 0 모두 가능하다.
만약 flex의 자식인 경우 position이 static이여도 z-index를 적용할 수 있다.
2. 상세
2.1. 배치 조건
2.1.1. static만 이루어진 경우
position 속성이 static인 요소로만 이루어진 경우에는, HTML 문서상 나중에 선언된 요소가 가장 앞에 배치된다.
static 요소는 z-index가 0으로 고정이기 때문에 z-index를 설정하는 것이 의미가 없다.
2.1.2. static과 아닌 요소가 함께 있는 경우
position의 값이 static이 아닌 요소가 항상 앞에 배치된다.
만약 static인 요소와 z-index가 지정된 static이 아닌 요소가 함께 배치되어있을 경우, z-index가 음수인 요소는 static 보다 뒤에 위치하게 되며, z-index가 양수인 요소는 static보다 앞에 위치하게 된다.
2.1.3. static이 아닌 요소만 이루어진 경우
position 속성이 static이 아닌 요소로만 이루어진 경우에는, HTML 문서상 나중에 선언된 요소가 가장 앞에 배치된다.
또한 z-index가 지정된 경우에는 높은 숫자의 값을 가진 요소가 가장 앞에 위치하게 된다.
2.2. stacking context
z-index가 적용되는 기준이 되는 범위를 stacking context라 한다.
stacking context가 다르다면, z-index의 값을 부여해도 원해는 위치대로 요소가 배치되지 않을 수 있다.
위의 예시를 보면, 가장 z-index가 큰 요소는 100이 부여된 box2(파란색)이다.
하지만 가장 상위에 놓인 도형은 z-index 값이 2인 box1(빨간색)이다.
그 이유는 box1 도형의 z-index가 비교되는 범위는 group이라는 클래스명을 가진 div 태그이기 때문이다.
group 클래스의 z-index의 값은 1이므로 box1 도형이 상위에 놓이게 되며, group 클래스 내에 위치한 box2는 아무리 z-index 값이 높더라도, 비교대상에 box1이 포함되어있지 않기 때문에 항상 box1보다 하위에 위치하게 된다.