z-index

CSS에서 z-index 속성은 element의 적층 순서를 제어하는 데 사용된다. 키보드 탭키를 사용할 때 이동순서이기도 하다. 

인덱스가 높은 element는 z 인덱스가 낮은 element 앞에 나타난다.

z-index 속성은 정적이 아닌 위치 값을 가진 element에만 적용할 수 있다. 즉, 절대, 상대 또는 고정 값의 element는 z-인덱스를 가질 수 있다.

예를 들어, 한 페이지에 두 개의 element가 있고 한 element가 다른 element 앞에 나타나도록 하려면 z-index 속성을 사용하여 쌓기 순서를 제어할 수 있다.

[Example]

#element1 {
    position: absolute;
    z-index: 1;
}

#element2 {
    position: absolute;
    z-index: 2;
}

이렇게 하면 element 2의 z 인덱스 값이 더 높기 때문에 element 1이 element 2 뒤에 나타나다.

명시적인 z-index 값이 없는 element는 "auto"의 z-index 값을 가지며 HTML의 마지막 element가 맨 위에 나타나는 일반적인 스태킹 순서에 참여한다.

z-index는 정적 element에서 작동하지 않는다는 점도 중요합니다. 정적 element에 z-index를 사용하려면 정적 element 이외의 위치 값을 지정해야 한다.

z-index 속성에 음수 값을 사용하여 z-index 값이 낮은 다른 element 뒤로 element를 밀어넣을 수도 있다.

[Example]
element1이 더 높은 z-index 값을 가진 element 뒤에 나타나다.

#element1 {
    position: absolute;
    z-index: -1;
}

element가 많고 z 인덱스 값이 다른 웹 페이지에서 element의 적층 순서를 관리하는 것이 복잡해질 수 있으므로 z 인덱스를 주의 깊게 사용하는 것이 중요하다.