[CSS] zindex가 똑같은 요소는 어떤게 위로 표시가 되나요 ?

📌 동일한 z-index일 때 위로 표시되는 요소 순서

1. HTML에서 나중에 선언된 요소가 위로 표시됨
   • DOM(Document Object Model) 구조에서 뒤쪽(later in the DOM)에 있는 요소가 위에 표시됩니다.

<div class="box" style="z-index: 10; position: absolute;">Box 1</div>
<div class="box" style="z-index: 10; position: absolute;">Box 2</div>

2. 요소의 부모(stacking context)가 높은 z-index를 가지면 그 안의 요소도 영향을 받음

• 부모 요소의 z-index가 높은 요소 안의 자식 요소는, z-index가 같더라도 다른 부모 아래에 있는 요소보다 위에 올 수 있음.

<div style="position: relative; z-index: 5;">
    <div style="position: absolute; z-index: 10;">A</div>
</div>
<div style="position: relative; z-index: 3;">
    <div style="position: absolute; z-index: 10;">B</div>
</div>

 

3. position: relative | absolute | fixed | sticky가 적용된 요소가 position: static인 요소보다 위에 표시됨

• position이 설정되지 않은(static) 요소는 position이 있는 요소보다 뒤로 감.

<div style="z-index: 10;">Static Element</div>
<div style="position: absolute; z-index: 10;">Absolute Element</div>

 

 

🎯 결론

✅ 같은 z-index라면?

1. HTML에서 나중에 등장한 요소가 위에 표시됨
2. 부모 요소의 z-index가 높은 경우, 그 자식도 영향을 받음
3. position: relative | absolute | fixed 요소가 static 요소보다 위에 표시됨
4. 필요하면 z-index를 더 높이거나, DOM 순서를 변경하면 해결 가능! 🚀