스타일 zIndex 속성

정의 및 사용법

zIndex 정위치 요소의 스택 순서를 설정하거나 반환하는 속성입니다。

높은 스택 순서(1)을 가진 요소가 낮은 스택 순서(0)를 가진 다른 요소보다 항상 앞에 위치합니다。

팁：정위치 요소는 position 속성 설정됩니다：relative、absolute 또는 fixed 요소.

팁：중첩 요소를 생성하려면 이 속성이 매우 유용합니다。

추가로 참조하십시오：

CSS 강의：CSS 정위치

CSS 참조 매뉴얼：z-index 속성

예제

예제 1

<img> 요소의 스택 순서를 변경합니다：

document.getElementById("img1").style.zIndex = "1";

직접 테스트해 보세요

예제 2

<div> 요소의 z-index 속성 값을 변경합니다：

document.getElementById("myDIV").style.zIndex = "-1";

직접 테스트해 보세요

예제 3

<img> 요소의 z-index 속성 값을 반환합니다：

alert(document.getElementById("img1").style.zIndex);

직접 테스트해 보세요

문법

zIndex 속성 반환：

object.style.zIndex

zIndex 속성 설정：

object.style.zIndex = "auto|number|initial|inherit"

속성 값

값 설명
auto 브라우저가 요소의 스택 순서를 결정합니다(문서 내의 순서 기반으로). 기본 값.
number 요소의 스택 순서를 정의하는 정수입니다. 음수 값을 허용합니다。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： auto
반환 값： 문자열로, 요소의 스택 순서를 나타냅니다。
CSS 버전： CSS2

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원