CSS z-색인 속성
예시
이미지의 z-색인을 설정합니다.
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
정의 및 사용
z-index
속성은 요소의 스택 순서를 지정합니다 .
스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있습니다.
참고: z-index
위치 지정 요소(위치: 절대, 위치: 상대, 위치: 고정 또는 위치: 고정) 및 플렉스 항목(
디스플레이:플렉스 요소의 직계 자식인 요소)에서만 작동합니다.
참고: 두 개의 배치된 요소가 지정되지 않고 겹치면 z-index
HTML 코드에서 마지막에 위치한 요소가 맨 위에 표시됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS 구문
z-index: auto|number|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 포지셔닝
HTML DOM 참조:
zIndex 속성