CSS z-index 속성

정의와 사용법

z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 위치합니다.

주의사항:요소는 부정적인 z-index 속성 값을 가질 수 있습니다.

주의사항:Z-index는 위치를 설정하는 요소에서만 효과적입니다!(예: position:absolute;)!

설명

이 속성은 위치를 설정하는 요소가 z축에 대해 위치를 설정하며, z축은 화면에 직립적으로 확장되는 축으로 정의됩니다. 긍정적인 값이면 사용자에게 더 가까이, 부정적인 값이면 사용자에게 더 멀리 위치합니다.

추가로 참조하십시오：

CSS 강의：CSS 정렬

HTML DOM 참조 설명서：zIndex 속성

예제

이미지의 z-index를 설정합니다：

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

개인적으로 시도해 보세요

CSS 문법

z-index: auto|number|initial|inherit;

속성 값

값 설명
auto 기본. 스택 순서는 부모 요소와 동일합니다.
number 요소의 스택 순서를 설정합니다.
inherit 부모 요소에서 z-index 속성 값을 상속해야 합니다.

기술 세부 사항

기본 값: auto
상속성: no
버전: CSS2
JavaScript 문법: object.style.zIndex="1"

더 많은 예제

Z-index
Z-index는 한 요소를 다른 요소 뒤에 배치하는 데 사용될 수 있습니다.
Z-index
예제에서의 요소는 Z-index가 변경되었습니다.

브라우저 지원

표의 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0