CSS에서 Z축을 따라 요소 겹침 조절하기

요소의 겹침 순서는 0, 양의 정수 또는 음의 정수 값을 사용하는 속성 z-index를 통해 조절할 수 있습니다. 이 속성은 position 속성 값이 absolute, fixed 또는 relative로 설정된 요소에만 작동합니다.

이 속성을 사용할 때 요소 겹침 규칙은 다음과 같습니다: z-index 값이 더 큰 요소가 위에 위치합니다.

이전 예제에서 요소들의 겹침 순서를 변경해 봅시다. 이를 위해 첫 번째 요소의 z-index를 두 번째 요소보다 크게 설정합니다. 예를 들어 다음과 같습니다:

#elem1 {
	z-index: 2;
}
#elem2 {
	z-index: 1;
}

코드 실행 결과:

다음 예시와 동일한 페이지를 만드세요: