(오랜만의 포스팅)
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:
'JavaScript' 카테고리의 다른 글
JavaScript 알고리즘(7) Multiple Pointers Pattern - averagePair (0) | 2022.04.26 |
---|---|
JavaScript 알고리즘(6) Multiple Pointers Pattern -areThereDuplicates (0) | 2022.04.09 |
JavaScript 알고리즘(5) Same Frequency Counter Pattern (0) | 2022.03.23 |
JavaScript - Webpack 이란 (0) | 2022.03.16 |
JavaScript - 페이지이동 location.href / location.replace() / location.assign() (0) | 2022.02.27 |
댓글