[css] z-index 및 스택 컨텍스트

22 Dec 2023

CSS에서 z-index와 스택 컨텍스트는 요소의 쌓임 순서를 제어하기 위한 중요한 속성과 컨셉입니다. 이를 이해하고 활용함으로써 웹페이지에서 요소들을 올바르게 표시할 수 있습니다.

z-index 속성

z-index는 요소의 수직 위치를 결정하는 CSS 속성입니다. 이 속성을 사용하여 요소가 다른 요소 위에 나타나는 순서를 제어할 수 있습니다. z-index는 각 요소에 숫자 값을 할당하여 숫자가 클수록 위쪽에 표시됩니다.

.element {
  z-index: 10;
}

모든 HTML 요소는 스택 컨텍스트 안에 위치하며, 각 스택 컨텍스트는 자체적인 z-index 스택을 갖습니다. 여러 요소가 동일한 스택 컨텍스트에 속해 있다면, 그들 간의 상대적인 z-index 값에 따라 쌓임 순서가 결정됩니다.

스택 컨텍스트는 일반적으로 다음과 같은 방법으로 결정됩니다:

z-index 속성: z-index가 명시되어 있을 경우에는 그 값에 따라 스택 컨텍스트가 형성됩니다.
위치 속성: 형제 요소 중에 position 속성이 있는 경우, 그 중에 상대적이거나 절대적인 위치 속성을 갖는 요소가 스택 컨텍스트를 형성합니다.
HTML 순서: 만약 위의 두 가지 방법으로도 스택 컨텍스트의 우선순위를 결정할 수 없을 경우, HTML의 순서에 따라 스택 컨텍스트가 형성됩니다.

정확한 z-index 및 스택 컨텍스트를 이해하는 것은 웹 페이지의 레이아웃 및 시각적 표현을 관리하는 데 중요합니다.

이렇게 z-index 및 스택 컨텍스트를 이해하고 사용하여 요소의 쌓임 순서를 조정할 수 있습니다.