z-Index

유노코딩 | 입문자를 위한 CSS 기초 강의 #19 z-index

MDN | z-index

 

Z-Index

• 요소의 쌓임 순서(stack order)를 정의
• 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식
• 위치 지정 요소(positioned element)에 대해 적용할 수 있는 속성
  • 위치 지정 요소: position속성이 정의되어 있는 요소 (relative, absolute, fixed, sticky)

 

쌓임 맥락

• html 요소를 만들어주면 문서의 흐름에 따라 요소가 배치됨
• 하지만 position 속성등을 사용해서 요소의 위치를 변경해주면 동일한 위치에서 요소가 겹쳐지는 경우가 있음
• 이럴 때 가로 x축, 세로 y축가 아닌 정면 z축에 요소가 쌓임
• 나중에 생성된 요소가 먼저 생성된 요소 위에 쌓임(z축)

z-index 값

• z-index의 기본값은 auto : 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태
• 정수값을 지정해주면, 정수값이 낮음 -> 높음으로 쌓아올려짐 (0부터 올릴 수 있음)
  • 정수가 (상대적으로) 높을 수록 위에 보임

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

/* <integer> 값 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */

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