당신의 z-index가 동작하지 않는 이유

참고 : https://coder-coder.com/z-index-isnt-working/

1. z-index는 같은 stacking context에 쌓인 순서대로 위에 올라온다.

<div class = "a">
<div class = "b">
<div class = "c">

순서대로 코드가 작성되었으면 c는 b보다 , b는 a보다 항상 위에 있음.

2. position 값을 가지고 있지 않는 경우

⭐⭐⭐⭐⭐ 별표 다섯개 ⭐⭐⭐⭐⭐

가상요소로 뒷배경을 만들었는데 아무리 해도 context가 앞으로 오지 않았다.
before 요소에 넣었는데 before가 가리는 현상 발생!! z-index값을 넣어도 값이 적용되지 않았다.

<button>
    <div class = "btn">
    	가려지던 문구
    </div>
</button>

이런 상황에서 button에 가상요소를 넣던, .btn에 가상요소를 넣던 가 려 짐
그 이유가 바로 .btn에 position요소를 넣지 않아서 였다.

position된 속성은 position되지 않은 속성보다 항상 위에 올라간다.

3. opacity나 transform 같은 css 속성 추가

opacity나 transform 같은 css 속성들을 요소에 설정한 경우, 각 요소들은 새로운 stacking element에 들어가게 됨. 이런 경우 z-index 값을 설정해 층을 나눠주기

4. 부모요소가 낮은 z-index를 갖고 있는 경우

<div class = "parents">
  <div class = "child"></div>
</div>
<div class = "uncle"></div>

parents가 항상 uncle보다 낮은 z-index를 가지고 있는 경우, child는 z-index값을 uncle보다 높게줘도 uncle위로 올라갈 수 없다.

해결방법 1. 부모한테서 독립하기

<div class = "parents"></div>
<div class = "child"></div>
<div class = "uncle"></div>

이렇게 형제노드가 되면, 같은 stacking context안으로 들어가기 때문에 index값으로 조정이 가능하다!

해결방법 2. 부모요소의 position값 없애기

부모 요소에 position값이 없기때문에 child의 z-index값에 제한이 없어지게 된다.
하지만 이 방법은 별로 추천되는 방법은 아님.
why❓ 언제든 부모 요소에 position값이 추가될 수 있기 때문에