z-index 속성의 이해

z-index 속성은
요소들이 겹칠 때, 해당 요소가 다른 요소 위나 아래에 놓일 쌓임 맥락(Stacking context)의 우선순서를 지정합니다.

z-index 속성의 값이 클수록 요소는 작은 값의 요소나 쌓임 맥락을 생성하지 않는 요소보다 위에 쌓입니다.

z-index 속성을 제대로 이해하려면, 먼저 쌓임 맥락(Stacking context)의 개념을 알아야 합니다.

쌓임 맥락(Stacking context)

대개 HTML 페이지를 2차원 평면으로 생각하기 쉽습니다.
HTML 요소들로 나타내는 텍스트, 이미지, 기타 요소들이 겹치지 않고 페이지에 나열되는 모습이나, 디스플레이에서 보여지는 웹 브라우저가 평면으로 되어 있기 때문입니다.

하지만, 요소들이 서로 겹칠 때, 어떤 요소는 다른 요소의 위에 놓이거나 혹은 아래로 놓이는 등 사용자가 볼 때 마치 요소들이 쌓이는 듯이 3차원처럼 화면에 렌더링됩니다.

쌓임 맥락(Stacking context)이란
2차원 평면의 HTML 페이지를 Z축이 있는, 즉 3차원적인 관점으로 표현하는 개념입니다. 이는 요소들이 겹칠 때, 해당 요소가 다른 요소 위나 아래에 쌓이는 순서를 따져서 맥락상 우선순위를 정하는 규칙을 말합니다.

쌓이는 순서를 따져서 맥락상 우선순위를 정하는 규칙

부모 요소보다 자식 요소가 위로 겹치고, 먼저 마크업한 요소와 나중에 마크업한 요소가 겹칠 경우 나중에 마크업한 요소가 위로 겹칩니다. 이런 경우는 위아래에 쌓이는 순서를 따진다고는 하지 않고, 일반적인 문서 흐름(normal flow)으로 배치된다고 합니다.

먼저, 요소들이 서로 겹칠 때, 모든 요소들의 쌓이는 순서를 따진다고 생각하지 마세요!

쌓임 맥락(Stacking context)의 생성

쌓임 맥락(Stacking context)은 일반적인 문서 흐름(normal flow)으로 배치되는 요소 이외에 요소들이 가진 특별한 속성으로 인해 쌓이는 순서를 따져야 하는 상황이 발생하는데 이러한 상황을 쌓임 맥락(Stacking context)의 생성(또는 형성)이라고 합니다.

이러한 쌓임 맥락(Stacking context)을 생성하는 요소들은 다음과 같습니다.

  • 문서에서 최상위 요소인 <html>
  • position 속성의 값이 sticky 또는 fixed로 설정된 요소
  • position 속성의 값이 relative 또는 absolute이고 z-index 속성의 값이 auto가 아닌 요소
  • 플렉스 박스의 아이템이고 z-index 속성의 값이 auto가 아닌 요소
  • 그리드 박스의 아이템이고 z-index 속성의 값이 auto가 아닌 요소
  • opacity 속성의 값이 1보다 작은 요소
  • mix-blend-mode 속성의 값이 normal이 아닌 요소
  • transform 속성의 값이 none이 아닌 요소
  • filter 속성의 값이 none이 아닌 요소
  • backdrop-filter 속성의 값이 none이 아닌 요소
  • perspective 속성의 값이 none이 아닌 요소
  • clip-path 속성의 값이 none이 아닌 요소
  • mask 속성의 값이 none이 아닌 요소
  • mask-image 속성의 값이 none이 아닌 요소
  • isolation 속성이 isolate 값으로 설정된 요소
  • contain 속성의 값이 layout 또는 paint 또는 strict 또는 content 값으로 설정된 요소
  • 자바스크립트의 Fullscreen API로 표시된 Fullscreen 요소
  • 자바스크립트의 Popover API로 표시된 Popover 요소
  • 최상위 레이어(Top layer)에 배치된 요소와 이에 상응하는 ::backdrop 가상 요소
  • will-change 속성의 값이 쌓임 맥락(Stacking context)을 생성하는 속성이 가진 요소

이러한 쌓임 맥락(Stacking context)을 생성하는 요소들은 그렇지 않은 형제 요소보다 위에 쌓입니다.

또한, 쌓임 맥락(Stacking context)을 생성하는 요소들 중에서는 쌓임 맥락(Stacking context)의 우선순서를 z-index 속성으로 지정할 수 있습니다.

z-index 속성이 영향을 미치는 요소

쌓임 맥락(Stacking context)을 생성하는 요소들 중에서 다음의 요소들은 z-index 속성이 영향을 미칩니다.

  • position 속성의 값이 relative로 설정된 요소
  • position 속성의 값이 absolute로 설정된 요소
  • position 속성의 값이 fixed로 설정된 요소
  • position 속성의 값이 sticky로 설정된 요소
  • 플렉스 박스의 아이템(display 속성의 값이 flex 또는 inline-flex의 자식 요소)
  • 그리드 박스의 아이템(display 속성의 값이 grid 또는 inline-gird의 자식 요소)

이러한 요소들은 z-index 속성을 사용하여 쌓이는 우선 순서를 조정할 수 있습니다.
단, 쌓이는 순서는 시각적으로만 영향을 미치며, 요소의 실제 DOM 순서는 변경되지 않습니다.

z-index 속성 사용법

z-index 속성은 이 속성이 영향을 미치는 요소에 값을 지정하며,
해당 요소가 쌓임 맥락(Stacking context) 내에서 어떤 우선순위를 가질지를 설정합니다.

형식 구문

CSS 
selector {
    position: auto | <정수>
}

구문

CSS 
/* 키워드 값 */
z-index: auto;

/* <정수> 값 */
z-index: -1;
z-index: 0;
z-index: 1;
z-index: 99;

/* 전역 값 */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

값

z-index 속성의 값은 두 가지 주요 방식으로 설정할 수 있습니다. <정수>(정수, integer)와 auto입니다. 각 값은 쌓임 맥락(Stacking context) 내에서 요소가 차지하는 우선순위를 다르게 정의하며, 요소가 새로운 쌓임 맥락을 생성하는지 여부도 결정합니다.

<정수>

정수 값(음의 정수, 0, 양의 정수)은 해당 요소의 쌓임 우선 순위을 정의합니다. 즉, 해당 요소가 현재 쌓임 맥락(Stacking context) 내에서 어떤 순서로 쌓일지를 결정하는 값입니다. 해당 맥락에서 자신의 위치를 0 값으로 설정합니다. 양의 정수 값이 클수록 해당 요소는 다른 요소들보다 위에 쌓이게 됩니다. 음의 정수 값은 양의 정수와 반대로 작용하며, 해당 맥락 내에서 더 뒤로 쌓이게 만듭니다. 즉, 음의 정수 값을 설정하면 그 요소는 쌓임 맥락 내에서 0보다 뒤에 위치하게 됩니다.

또한, <정수> 값이 설정되면 해당 요소는 새로운 쌓임 맥락을 생성합니다. 이 말은, 해당 요소의 자식 요소들은 부모 요소와 독립적으로 z-index 값을 비교하게 됨을 의미합니다. 즉, 자식 요소들의 z-index 값은 부모 요소의 z-index 값과 비교되지 않으며, 자식 요소들끼리만 z-index를 비교합니다.

따라서, <정수> 값을 사용하면 해당 요소가 자기만의 쌓임 맥락을 갖는 독립적인 레이어를 형성하게 되어, 자식 요소들이 부모와는 별개로 겹쳐지는 방식을 제어할 수 있습니다.

auto

새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치이며, 0과 동일하게 처리됩니다.

형식 정의

z-index 속성의 형식 정의
초깃값 auto
적용 요소
  • position 속성의 값이 relative로 설정된 요소
  • position 속성의 값이 absolute로 설정된 요소
  • position 속성의 값이 fixed로 설정된 요소
  • position 속성의 값이 sticky로 설정된 요소
  • 플렉스 박스의 아이템(display 속성의 값이 flex 또는 inline-flex의 자식 요소)
  • 그리드 박스의 아이템(display 속성의 값이 grid 또는 inline-gird의 자식 요소)
상속 아니오
애니메이션 <정수>(정수, integer)

예제

HTML 
<div class="wrap">
	<div class="z-box my-box">My Box</div>
	<div class="z-box z-2">Z-2</div>
	<div class="z-box z-3">Z-3</div>
</div>
CSS 
.wrap {
	width: 270px;
	height: 270px;
	position: relative;
}
.z-box {
	width: 180px;
	height: 180px;
	position: absolute;
	border: 5px solid;
}
.my-box {
	top: 0px;
	left: 0px;
	background: rgba(0, 102, 204, 0.7);
	border-color:  #000;
	border-style: dashed;
	z-index: 1;
}
.z-2 {
	top: 40px;
	left: 40px;
	background: rgba(153, 102, 255, 0.7);
	border-color:  rgb(153, 102, 255);
}
.z-3 {
	top: 80px;
	left: 80px;
	background: rgba(255, 51, 0, 0.7);
	border-color:  rgb(255, 51, 0);
}
실제 적용된 모습
z-index 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
z-index 예 예 예 예

명세서

z-index 속성의 명세서 사양
명세서 사양
z-index Cascading Style Sheets Level 2
#z-index

참고문헌

같이 보기