Frontend
CSS | 쌓임맥락과 블록서식맥락
구라미
2020. 2. 11. 20:32
영어를 그대로 번역한 단어라 조금 어색한 표현이다. 쌓임맥락과 블록서식맥락. HTML요소와 CSS렌더링은 순서대로 쌓임 맥락이 생성되는데 이러한 쌓임 맥락은 어디에서나, 다음 조건을 만족하는 요소가 생성한다.
- 문서의 루트 요소. (<html>)
- position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소.
- position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
- 플렉스(flexbox) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- 그리드(grid) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- opacity가 1보다 작은 요소. (불투명도 명세 참고)
- mix-blend-mode가 normal이 아닌 요소.
- 다음 속성 중 하나라도 none이 아닌 값을 가진 요소.
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
- isolation이 isolate인 요소.
- -webkit-overflow-scrolling이 touch인 요소.
- will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
- contain이 layout, paint, 또는 둘 중 하나를 포함하는 값(strict, content 등)인 요소.