컨테이닝 블록❓

<div>
  hello
</div>

div 가 하나 있습니다.
이 요소의 너비와 높이를 50% 로 설정하면,
도대체 누구 의 너비와 높이를 참고해서 그의 50% 를 가져온다는 걸까요?

이 누구 를 바로 컨테이닝 블록 이라고 할 수 있습니다.
한 요소가 다른 요소를 기준으로 참고하여 값을 가져올 때, 참고의 대상이 되는 요소입니다.
요소의 크기 위치 등은 컨테이닝 블록의 영향을 받습니다.

🦕 컨테이닝 블록은 어떻게 정해지나

일반적으로, flow layout 에서 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역 입니다.
물론 box-sizing: border-box; 라면 경계까지의 영역이 컨테이닝 블록이 되겠죠?

대부분의 경우 부모 요소의 콘텐츠 영역이 컨테이닝 블록이 되기에,
항상 그렇다고 착각하기 쉽습니다.
하지만 매번 그런 것은 아닙니다❗

컨테이닝 블록은 요소의 position 속성에 따라 다르게 선정됩니다.

• position 이 static, relative, sticky 중 하나인 경우
  (일반적인 문서 흐름을 따르는 경우)
  : 가장 가까운 조상 블록 컨테이너 or 가장 가깝고 서식 맥락을 형성하는 조상 요소(flex 나 grid, table 컨테이너)의 콘텐츠 영역

• position 이 absolute 인 경우
  : position 이 static 이 아닌 가장 가까운 조상의 내부 여백 영역 (border 내부 영역)

• position 이 fixed 인 경우
  : 뷰포트 영역

• position 이 absolute 나 fixed 인 경우,
  다음을 따르는 조상의 border 내부 영역

  1. transform 이나 perspective 속성 값을 가지거나, 가질 예정인 경우
  2. filter 속성 값을 가지거나, 가질 예정인 경우