스타일 zIndex 속성
예시
<img> 요소의 스택 순서를 변경합니다.
document.getElementById("img1").style.zIndex = "1";
정의 및 사용
zIndex 속성은 위치가 지정된 요소의 스택 순서를 설정하거나 반환합니다.
스택 순서가 더 큰 요소(1)는 항상 스택 순서가 더 낮은 요소(0)보다 앞에 있습니다.
팁: 위치 지정 요소는 위치 속성이 상대, 절대 또는 고정으로 설정된 요소입니다.
팁: 이 속성은 겹치는 요소를 만들려는 경우에 유용합니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
zIndex | Yes | Yes | Yes | Yes | Yes |
통사론
zIndex 속성을 반환합니다.
object.style.zIndex
zIndex 속성을 설정합니다.
object.style.zIndex = "auto|number|initial|inherit"
속성 값
Value | Description |
---|---|
auto | The browser determines the stack order of the element (based on its order in the document). This is default |
number | An integer that defines the stack order of the element. Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 자동 |
---|---|
반환 값: | 요소의 스택 순서를 나타내는 String |
CSS 버전 | CSS2 |
더 많은 예
예시
<div> 요소의 z-색인 속성 값을 변경합니다.
document.getElementById("myDIV").style.zIndex = "-1";
예시
<img> 요소의 z-색인 속성 값을 반환합니다.
alert(document.getElementById("img1").style.zIndex);
관련 페이지
CSS 튜토리얼: CSS 포지셔닝
CSS 참조: z-색인 속성
❮ 스타일 개체