z-index 속성은 HTML 요소의 쌓임 순서를 지정하는 데 사용됩니다. 더 정확히 말하면, 요소가 화면에 표시될 때 다른 요소들 위에 놓여야 하는 순서를 정의합니다. 이것은 주로 CSS의 position 속성이 absolute, relative, fixed, sticky 중 하나로 설정되어 있는 경우에 영향을 줍니다.

z-index 속성의 사용

z-index 속성은 정수 값을 이용하여 레이어의 순서를 지정합니다. 값이 더 큰 요소는 값이 작은 요소 위에 놓여지게 됩니다. 주의해야 할 점은, z-index 속성은 position 속성이 static 이거나 initial 인 경우에는 적용되지 않습니다. 또한, 부모 요소의 z-index 값이 설정되어 있지 않을 때 새로운 값이 적용되지 않습니다.

/* z-index 속성 설정 예시 */
.element {
  position: relative;
  z-index: 10;
}

.another-element {
  position: absolute;
  z-index: 20;
}

위의 예시에서 .another-element는 .element 위에 위치하게 됩니다.

중요한 점

• z-index 속성은 position 속성이 static 이거나 initial 인 경우에는 적용되지 않습니다.
• 부모 요소의 z-index 값이 설정되어 있지 않을 때 자식 요소의 z-index 값이 적용되지 않습니다.

결론

z-index 속성은 요소들의 쌓임 순서를 제어하는 데 사용됩니다. 이를 통해 웹 페이지의 레이아웃 및 UI를 더욱 다채롭게 구성할 수 있습니다.

이상으로 z-index 속성에 대한 개요를 마치도록 하겠습니다. 더 많은 정보가 필요하시다면 공식 CSS 문서를 참고하시기 바랍니다.

CSS z-index 속성 MDN 문서