패스잇
프론트엔드 개발 · 중급

CSS `position` 속성 중 `static`이 아닌 다른 값을 가질 때 형성되는 포지셔닝 컨텍스트(Positioning Context)에 대해 설명하고, `z-index` 속성이 이 컨텍스트 내에서 어떻게 동작하는지 구체적인 예시와 함께 설명해주세요.

힌트 · `position: relative`, `absolute`, `fixed`, `sticky`가 포지셔닝 컨텍스트를 생성하며, `z-index`는 동일한 컨텍스트 내에서만 유효하다는 점과 스택킹 컨텍스트의 개념을 간략히 언급하세요.

포지셔닝 컨텍스트z-index상대적겹침스태킹 컨텍스트

모범답안

CSS position 속성이 static이 아닌 값, 예를 들어 relative, absolute, fixed, sticky를 가질 때, 해당 요소는 새로운 포지셔닝 컨텍스트를 형성합니다. 이 컨텍스트는 자식 요소의 absolute 포지셔닝 기준이 됩니다.

z-index는 바로 이 포지셔닝 컨텍스트 내에서 요소들의 겹침 순서를 결정하는 속성입니다. z-index 값이 클수록 위에 위치하게 됩니다. 중요한 점은 z-index는 동일한 포지셔닝 컨텍스트 내의 요소들끼리만 비교 가능하다는 것입니다.

예를 들어, 부모 요소 A가 position: relative를 가지고 z-index: 1을 가질 때, A의 자식 요소 B가 position: absolute이고 z-index: 2를 가진다면, B는 A 안에서 가장 위에 위치하게 됩니다. 하지만 A와 다른 포지셔닝 컨텍스트를 가진 요소 C가 z-index: 3을 가진다면, C가 항상 B 위에 나타나는 것은 아닙니다. A의 z-index 값에 따라 C가 A 전체를 덮을 수도 있습니다. 이는 스태킹 컨텍스트라는 더 큰 개념과 관련됩니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 HTML / CSS 면접 질문

← HTML / CSS 면접 질문 전체 보기