[CSS] z-index

🪐z-index란

z-index는 CSS 속성으로, 요소의 쌓임 순서(스택 순서)를 지정하는 데 사용됩니다. 요소들이 겹쳐져 있는 경우, z-index 값이 높은 요소가 더 위에 표시되게 됩니다.
z-index 속성은 정수 값을 가지며, 음수 값도 허용됩니다. 값이 높을수록(양수일수록) 요소가 더 위에 표시되며, 동일한 값일 경우에는 HTML 구조에서 먼저 선언된 요소가 위에 표시됩니다.
일반적으로, z-index 속성은 position 속성이 static이 아닌 요소에 적용됩니다. 즉, position: relative;, position: absolute;, position: fixed; 등과 함께 사용됩니다.
-chatGPT

🪐사용 예제

div {
  position: relative;
  z-index: 1;
}

span {
  position: absolute;
  z-index: 2;
}

img {
  position: fixed;
  z-index: 3;
}

위 예시에서 div 요소의 z-index 값이 1이므로 다른 요소들보다 더 아래에 표시된다. span 요소의 z-index 값이 2이므로 div 요소 위에 표시되며, img 요소의 z-index 값이 3이므로 다른 모든 요소들 위에 표시된다.
z-index 속성을 사용하여 요소들의 쌓임 순서를 조정하면, 겹치는 요소들을 올바르게 배치하고 원하는 시각적 효과를 구현할 수 있다.