쌓임 맥락 공식 문서
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는
developer.mozilla.org
무언갈 겹쳐야할때 position 방식을 설정하고 z-index를 설정해왔다.
예를들어 모달이나 drawer를 생각해보자.
대부분 케이스에서 해당 ui가 나타난다면 기존 페이지위에 나온다.
position과 z-index를 제대로 설정한 것 같아도 예상치 못한 결과가 나올때가 간혹 있다.
<style>
.son {
position: absolute;
z-index: 10000;
}
.former {
position: absolute;
z-index: 10;
}
.latter{
position: absolute;
z-index: 1;
}
...
</style>
<div class="former">hello</div>
<div class="latter">
<div class="son"/>
</div>
...former가 latter앞에 있다.(former은 latter위에 존재한다.)
z-index가 1보다 큰 10이기 때문이다.
son의 z-index는 10보다 큰 10000이므로 former위에 있어야 할 것 같다.
하지만 실제론 그렇지 않다.
왜냐하면 son의 z-index는 latter의 쌓임맥락안에서 유효하기 때문이다.
z-index는 global하지 않다.
어려운 점은 position z-index외에도 쌓임 맥락을 형성하는 속성들이 있단 것이다.
1. opacity가 1이 아닐 때
2. mix-blend-mode가 normal이 아닐 때
3. transform
4. filter
5. 그외
나같은 경우엔 스켈레톤 ui를 구현하는 중에 opacity를 사용함으로서 쌓임맥락이 형성돼 의도치않은 버그가 발생했다.(실제론 디자이너가 움짤로 준다고 한다는 얘기가 있다...)
이 경우 backgroud-color을 직접 바꾸는 애니메이션을 적용해 해결했다.
'개발' 카테고리의 다른 글
| 해외 웹사이트 번역 키고 이용할 시 가끔씩 오류가 나는 원인 추측 (0) | 2024.03.18 |
|---|---|
| 무한스크롤에 대한 고민 (0) | 2024.03.05 |
| nextjs nestjs oauth2 login 유저 경험을 위한 잔꾀부리기 (1) | 2024.03.02 |
| nextjs login ui 고민이 있다. (0) | 2024.02.28 |
| 내가 개발중인 nestjs 인증 structure (1) | 2024.02.27 |