z-index가 동작하지 않는 이유, 같은 위계에서 비교하기

오늘도 룰루랄라 신나게 프로젝트 코딩을 하던 도중에 UI가 깨지는 부분을 발견했다!

메뉴보다 앞에 나오는 메인 페이지 콘텐츠 (텍스트 및 카드)

오호~ 이건 당연히 z-index 문제겠지! 하고 메뉴 화면 Element에 z-index를 줬지만...! 여전히 문제는 해결되지 않았다.

흠...왜 z-index가 안먹히는거지?

<!--수정한 코드 예제-->
<header>
  <div id="menu-screen" style="position:absolute;z-index:1000;">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
  </div>
</header>
<main>
  <div>메인 텍스트</div>
  <div class="card-slider">
    <!--슬라이더 카드-->
  </div>
</main>

---

position도 넣고 z-index도 넣었는데 왜 안되지?

...?????? 내가 예상한 결과가 아닌데....?

나는 분명히 저 메뉴 Element에 position: absolute도 설정해주고, z-index도 1000으로 설정해줬다. 혹시 메인 콘텐츠에 z-index를 따로 설정했나? 하고 확인해봤는데 z-index가 따로 설정되어 있지도 않았다. 그럼 z-index 순서가 밀린 것도 아닐텐데...

 

내가 아는 선에서 머리를 데굴데굴 굴리며 메뉴 Element의 하위 Element까지 z-index를 줘보기도하고 main Element에 z-index: -1을 설정해봤지만 결과는 모두 실패했다...울먹이면서 stackoverflow와 블로그 포스팅들을 뒤지던 중, z-index가 동작하지 않는 이유 4가지라는 글을 발견하게 되었다.

 

혹시 저 4가지 이유 중에 내 이슈도 있지 않을까? 라는 생각으로 블로그 글을 읽어봤는데 와우...해결방법을 찾았다...!!

내가 겪은 문제는 부모의 z-index 레벨 때문에 자식 element가 더 낮은 stacking context 안에 포함되어 발생한 것이었다.

 

음...이게 무슨 이야기냐면...!! 간단히 z-index는 같은 위계에 있는 요소들끼리만 비교할 수 있다로 정리할 수 있다. 예제를 통해 더 자세히 설명해보도록 하겠다.

---

z-index는 같은 위계에 있는 요소들끼리만 비교할 수 있다

<header>
  <div id="menu-screen" style="position:absolute;z-index:1000;">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
  </div>
</header>
<main>
  <div>메인 텍스트</div>
  <div class="card-slider">
    <!--슬라이더 카드-->
  </div>
</main>

아까 내가 수정한 코드를 다시보자. 위의 예제에서 "#menu-screen" Element에 position:absolute와 z-index가 설정되어 있지만, main Element보다 상위에 표시될 수 없다. 그 이유는 main Element와 #menu-screen을 비교하는 것이 아니라 header Element를 비교하기 때문이다.

 

main Element와 "#menu-screen" Element는 같은 위계에 있지 않다. 이 때 main이 #menu-screen보다 상위에 있으므로, main과 같은 위계에 있는, #menu-screen의 부모인 header Element를 비교하게 되는 것이다. 따라서, main과 header Element 모두 z-index 속성이 설정되어 있지 않으니 마크업 순서에 따라 main Element가 header Element 상단에 표시된 것이다. (마크업이 뒤에 있을 수록 상단으로 올라감)

---

그렇다면 위 문제를 해결할 방법은?

1. #menu-screen Element와 main Element를 같은 부모 안으로 옮겨준다.

• #menu-screen Element에는 이미 z-index가 설정되어 있으니 같은 위계에 있는 Element 중에서는 가장 우선순위가 높을 것이기 때문!

2. header Element에 z-index를 설정해준다.

• 어차피 header Element는 main Element보다 항상 상단에 표시되어야 하기 때문에 header Element에 z-index를 넣어줘도 된다고 생각했음!

나는 2번 방법으로 해당 문제를 해결했다! 1번 방법보다 간단하기도 하고 header가 main 콘텐츠보다 항상 위에 있는게 맞다고 생각해서기도 하다!

 

문제가 발생했을 때는 조금(?) 짜증나긴 했지만 덕분에 좋은 지식을 얻게 되서 기분이 좋다! 오늘도 성장한 느낌이다~

블로그 글 다 썼으니까 마저 코딩하러 가야지...ㅎㅎㅎ

 

---

참고자료

• z-index가 동작하지 않는 이유 4가지