영어를 그대로 번역한 단어라 조금 어색한 표현이다. 쌓임맥락과 블록서식맥락. 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 등)인 요소.
'Frontend' 카테고리의 다른 글
| JS | 선택자! 요소를 선택하는 다양한 방법 (0) | 2020.02.11 |
|---|---|
| JS | 동적으로 추가된 HTML element 제어하기 (0) | 2020.02.11 |
| CSS | position 절대위치, 상대위치 (0) | 2020.02.11 |
| JS | Javascript에서 이벤트 등록하기, jQuery에서 이벤트 등록하기 (0) | 2020.02.10 |
| React | 배포하기 & 컴포넌트 만들기 (0) | 2020.02.07 |
댓글