Stacking order

자두·2025년 3월 14일

CSS TIL

CSS

목록 보기

4/5

이전 포스팅에서 알아봤던 position과 관련해, 또 다른 흥미로운 내용을 발견했다!

사건의 발단은 다음과 같다.

position: absolute와 관련해, body를 제외한 다른 relative 요소가 있을 때 absolute 요소의 위치가 어떻게 변화하는지 알아보기 위해 요래저래 요소값을 바꿔보던 중이었다.

그러다가 (2) 블록과 동일한 부모를 갖는 자매(형제) 요소인 (3) 블록에 relative를 부여해봤다.

< Before >	< After >
`#two { position: absolute; }`	`#two { position: absolute; }`
`#three { position: static; }`	`#three { position: relative; }`

오잉? 근데 이게 웬걸?
갑자기 (3) 블록이 (2) 블록 앞으로 튀어나왔다.

지금까지 배운걸 토대로 생각해봤을 때,

absolute 요소는 static이 아닌 가장 가까운 부모 요소를 기준으로 이동함
그러므로 (3) 블록에 relative를 부여했더라도 (2) 블록은 부모 요소가 아니기 때문에 absolute의 위치를 변화시킬 수 없음
relative를 이동시키지도 않았을 뿐더러, 이동시킨다고 하더라도 relative는 다른 요소의 위치에 영향을 주지 않음

... 이기 때문에, 위치에 변동이 있을 수 없다고 생각했다.🤔

그런데 답은 요소가 쌓이는 순서에 있었다!

HTML 선언 순서

위 예시의 HTML은 다음과 같다.

<div class="wrapper">
        <div class="box" id="one">(1)</div>
        <div class="box" id="two">(2)</div>
        <div class="box" id="three">(3)</div>
        <div class="box" id="four">(4)</div>
    </div>

.box들은 모두 같은 부모 요소 내에 있는 자식 요소들이지만, 분명히 순서가 존재한다.
이 경우, #one - #two - #three - #four 순서대로 HTML 상에 선언한 것이다.

💡 즉, HTML에서 어떤 요소를 나중에 선언했는지가
기본적으로 요소가 쌓이는 순서(Stacking order)에 영향을 준다!

위 예시와 같은 현상이 발생하게 된 이유는 다음과 같다.

(2) 블록이 absolute 요소가 되면서 원래 문서의 흐름에서 제거됨
(3) 블록이 relative 요소로 변하면서 HTML에서 더 나중에 선언된 (3) 블록이 더 앞으로 출력됨

그렇다면 여기서 드는 또 한 가지 의문점이 있다...

(3) 블록이 더 우선적으로 출력되어야 한다면, 왜 (3) 블록에 relative를 부여하기 전에는 (2) 블록이 더 앞에서 출력됐는가?

그건 바로, Stacking Order에서 HTML 선언 순서 외에도 다른 기준을 고려하기 때문이다!

Stacking Order

💡 CSS 요소가 화면에 출력될 때, 기본적으로 다음과 같은 순서로 쌓이게 된다.

1️⃣ z-index를 명확하게 지정한 요소 (값이 높을수록 위로 배치)

2️⃣ position 속성값이 static이 아닌 요소
= position: relative / absolute / fixed / sticky

3️⃣ position: static

4️⃣ HTML에서 나중에 선언된 요소

✅ 즉, relatve, absoulte, fixed, sticky 와 같은 static이 아닌 요소들은 기본적으로 같은 우선순위를 가지게 되고, 그 중에서 HTML 상 나중에 선언된 요소가 가산점을 받아 위로 출력됨

✅ 하지만! z-index를 명시하면 순서를 강제로 변경할 수 있음