CSS - z-index 적용 안될때 (Why your z-index isn't working)

 

 

(오랜만의 포스팅)

z-index 는 나에게 너무 심플하게 다가왔다.

숫자가 높을수록 화면 상단에 div 등의 엘레멘트를 고정해주는 편리한 녀석😏

 

하지만 심플할수록 적용이 안되는 일이 빈번했다. 😑

이유를 파악도 못한 채 나는 css 여기저기 z-index 를 랜덤하게 넣었다 빼기를 반복하였고

어느날 정확하게 왜 안되는지 궁금해졌다. 

z-index 가 적용되지 않는 이슈를 해결해줄 강려크한 내용을 아래 블로그에서 참고하여 내가 이해해본 방식으로 정리해 보았다.

 

 

---

Why your z-index isn't working

(왜 나의 쥍인덱스는 안먹히는가)

 

1. Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements.

z-index 사용 안하고, 

그냥 <div> 등의 태그를 사용하면 맨 뒤에 선언된 애들이 자동으로 최상단에 쌓인다.

 

그 이유는 웹 페이지의 natural stacking order 때문이다. 

이 룰은 기본적으로 어떤 요소가 맨 위에 있거나 맨 아래에 있을지를 결정한다.

<section class="content">	 // 살짝씩 겹친 상황이라고 가정해보자 
  <!-- Top Cat -->
  <div class="cat-top"></div>    // 첫번째 요소 : 얘가 맨 아래로 내려가고
  
  <!-- White Block -->
  <div class="content__block">	 // 두번째 요소
    Meow meow meow meow meow meow meow 
  </div>
  
  <!-- Bottom Cat -->
  <div class="cat-bottom"></div> // 세번째 요소 : 얘가 자연스럽게 맨 위로 올라온다
</section>

 

 

2. The element doesn’t have its position set

z-index 가 적용되려면,

position 속성을 같이 사용해줘야 한다. (absolute, relative, sticky, fixed)

 

.content__block {
    z-index: 1;	// 얘만 사용하지 말고 
    position: relative; // 이런식으로 포지션도 추가!
}

 

 

3. Setting some CSS properties like opacity or transform will put the element in a new stacking context.

 

z-index 나 position 을 사용하지 않아도,

opacity 나 transform 같은 속성을 사용하면 상단으로 끌어 올려준다.

.cat-bottom { 
    transform: rotate(180deg); // 얘같은 속성을 사용하면 z-index 효과를 낸다. 
}
.
.
.
그런데 이게 원치않는 효과라면?
아래처럼 바꿔보자
.
.
.
.content__block {	       // 다른 애한테도 공평하게 position 과 z-index 를 준다.
    position: relative;
    z-index: 2;
}
.cat-top, .cat-bottom {
    position: relative;
    z-index: 1;
}

 

 

4. The element is in a lower stacking context due to its parent’s z-index level

z-index를 적용할 때, 하나는 부모 요소에 z-index 가 있고, 또하나는 자식요소에 z-index 가 있다.

그럼 depth가 다르다면 동등하지 않게 적용된다.

 

딱 보면 모달창이 z-index 100 이라 제일 대빵일 것 같지만, 아니다.

부모는 = 부모끼리 대결하기 때문에 z-index 는 책갈피가 더 높게 책정된다.

애들은 = 애들끼리 이기때문에 모달창은 아무리 z-index 파워가 높아도 이길수없다.

 

<div class="content">		  // 여기에 z-index 가 1
  <div class="modal">팝업창</div> // 얘는 z-index 가 100
</div>

<div class="book-clip">책갈피</div> // 여기는 z-index 가 5
  

.
.
.
마음에 안드는 효과라면?
자 아래처럼 바꿔보자
.
.
.
<div class="content"></div>	

<div class="modal">팝업창</div> // 여기로 팝업창을 빼줘서 부모와 동등한 depth로 만들어주었다.
 
<div class="book-clip">책갈피</div>

 

 

 

 

ref:

4 reasons your z-index isn’t working (and how to fix it)