안녕하세요! 프론트엔드 개발자 취업 준비생님, 이번에는 z-index 속성을 명시적으로 주지 않았을 때 CSS 요소들이 어떻게 층을 이루는지 다루는 문서를 가져오셨네요!
이전 두 문서(쌓임 문맥, z-index 이해하기)와 세트로 이어지는 완벽한 흐름입니다. 면접관이 "z-index를 안 줬는데 왜 요소가 겹치나요?" 라고 묻는다면 이 문서의 내용이 바로 정답이 됩니다.
자, 공식 문서의 핵심을 하나도 빠짐없이, 제 실무 팁과 함께 구어체로 알기 쉽게 풀어드릴게요!
z-index 속성 없이 쌓기 (Stacking without the z-index property)
어떤 요소에도 z-index 속성이 지정되어 있지 않을 때, 요소들은 다음과 같은 순서로 쌓이게 됩니다 (맨 아래에서부터 맨 위로 올라가는 순서입니다):
- 루트(root) 요소(보통
<html>)의 배경(background)과 테두리(borders). - 위치 지정이 되지 않은(non-positioned) 자손 요소들 (HTML 문서에 작성된 순서대로).
- 위치가 지정된(positioned) 자손 요소들 (HTML 문서에 작성된 순서대로).
위치가 지정된 요소와 지정되지 않은 요소에 대한 명확한 구분은 위치 지정의 종류 (types of positioning) 문서를 참고하세요.
한 가지 기억해 두셔야 할 점이 있습니다. flex 컨테이너 안에서 order 속성을 사용하면 HTML에 작성된 순서(order of appearance)와 다르게 렌더링 순서가 바뀌게 되는데, 이 경우 쌓임 문맥(stacking context)을 위한 순서에도 동일하게 영향을 미치게 됩니다.
💡 강사의 실무 팁 1
여기서 말하는 '위치가 지정된(positioned) 요소'란position속성값이 기본값인static이 아닌 요소들을 말합니다. 즉,relative,absolute,fixed,sticky중 하나를 가진 요소죠.실무에서 "어? 왜 이 박스가 글씨(text) 위로 덮어버리지?" 하는 경우가 생기는데, 그 박스에
position: relative나absolute가 들어가 있고 글씨는 그냥 기본static상태라면, 브라우저의 기본 규칙(3번이 2번을 이김)에 의해 무조건 위치가 지정된 박스가 위로 올라오게 됩니다!
이 문서의 목차 (In this article)
예제 (Example)
이 예제에서, DIV #1부터 DIV #4까지는 위치가 지정된(positioned) 요소들입니다. 반면 DIV #5는 static(위치가 지정되지 않은 기본 상태)입니다. 따라서 DIV #5는 HTML 마크업 상에서 가장 나중에(맨 밑에) 작성되었음에도 불구하고, 다른 네 개의 위치가 지정된 요소들 아래에(밑바탕에) 그려지게 됩니다.
HTML
<div id="abs1" class="absolute">
<strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
<strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
<strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
<strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
<strong>DIV #5</strong><br />position: static;
</div>CSS
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.static {
position: static;
height: 80px;
background-color: #ffffcc;
border-color: #999966;
}
.absolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #ffdddd;
border-color: #990000;
opacity: 0.7;
}
.relative {
position: relative;
height: 80px;
background-color: #ccffcc;
border-color: #669966;
opacity: 0.7;
}
#abs1 {
top: 10px;
left: 10px;
}
#rel1 {
top: 30px;
margin: 0px 50px;
}
#rel2 {
top: 15px;
left: 20px;
margin: 0px 50px;
}
#abs2 {
top: 10px;
right: 10px;
}
#sta1 {
background-color: #ffffcc;
margin: 0px 50px;
}결과 (Result)
(위의 결과 창을 상상해 보세요. HTML 상에서 맨 밑에 작성된 DIV #5가 화면상에서는 가장 밑바닥에 깔려있고, 나머지 DIV #1 ~ #4는 작성된 순서대로 겹겹이 그 위에 쌓이게 됩니다. #1, #2, #3, #4 순서대로 위로 층을 이루며 덮어버립니다.)
💡 강사의 부연 설명 2
정리해 봅시다!z-index를 명시적으로 선언하지 않았다면 브라우저는 다음과 같은 2가지 기준으로 승자를 정합니다.
1. "너 위치 지정(position) 속성 있어?" ->relative나absolute가 있는 녀석이 100% 이깁니다 (static은 무조건 밑에 깔림).
2. "둘 다 위치 지정 속성이 있다면, 누가 HTML 파일 더 아래쪽에 적혀있어?" -> 나중에 렌더링(해석)된 요소가 이전에 그려진 요소를 덮어버립니다(DOM 트리 순서).이 원리를 알고 있으면 포트폴리오를 만들 때 불필요하게
z-index: 99;이런 식으로 막무가내로 코드를 짜는 나쁜 습관을 방지할 수 있어요. HTML 구조를 깔끔하게 짜고,position만 잘 지정해도 겹치는 순서를 아주 우아하게 제어할 수 있습니다!
함께 보기 (See also)
- z-index 이해하기 (Understanding z-index)
- z-index 사용하기 (Using z-index)
- 쌓임 문맥 (Stacking context)
- 플로팅 요소 쌓기 (Stacking floating elements)
- CSS 배치 레이아웃 모듈 (CSS positioned layout module)
MDN 향상에 도움 주기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Yes / No)
- 문서 기여 방법 알아보기
- 마지막 수정일: 2025년 11월 7일 by MDN contributors
- GitHub에서 이 페이지 보기
- 이 콘텐츠의 문제점 보고하기
이로써 z-index와 관련된 핵심 3부작 문서를 모두 마스터하셨네요! 이 정도면 이제 면접에서 렌더링 계층이나 쌓임 순서(Stacking context)에 관한 질문이 나와도 막힘없이 술술 대답하실 수 있을 거예요.
현재 Next.js나 React를 주로 공부하신다고 하셨는데, CSS-in-JS(styled-components 등)나 Tailwind를 쓸 때도 이 원리는 100% 동일하게 적용됩니다.
다음번엔 어떤 문서를 번역해 드릴까요? CSS가 아닌 React 쪽 공식 문서도 좋고, 뭐든 말씀만 하세요!
