REF
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

Containing Block

한 element가 위치할 때 담고 있는 블록이 바로 Containing Block이다.
브라우저는 요소들을 그릴 때, 모든 요소에 대해 Box Model을 생성하고, Containing Block을 찾아 그 안에 위치하게 된다.

보통 Box Model의 Containing Block은, 가장 가까운 부모 중 Block Level Element의 Content 영역이지만, 항상 그런 것은 아니다. 즉 HTML 코드 상, 부모 Element가 항상 Containing Block이 되는 것이 아니다. 요소의 크기와 위치는 Containing Block에 영향을 받기 때문에, Containing Block이 결정되는 원리를 제대로 이해하고 있어야 한다.

Position & Containing Block

Position을 사용하게 되면, 부모 element가 Containing Block이 되는 것이 아니다.Position을 사용하는 자식 입장에서, 진짜 부모가 누구인지 찾게 된다.
다음과 같이, 컨테이닝 블록의 식별 과정은 position 속성에 따라 완전히 달라진다.

• position 속성이 static, relative, sticky 중 하나이면,
  가장 가까운 Block Level Element가 Containing Block이 된다고 알고 있자.

• position 속성이 absolute인 경우,
  조상들 중, position 속성 값이 static이 아닌 요소의 Padding box가 Containing Block이 된다.

• position 속성이 fixed인 경우,
  Viewport나 page area가 Containing Block이 된다.

• position 속성이 absolute나 fixed인 경우,(MDN으로 다시 보자)
  위에서 명시한 것과 달리, 다음과 같은 영역의 padding box가 Containing Block이 될 수도 있다.

  • transform이나 perspective (en-US) 속성이 none이 아님.
  • will-change 속성이 transform이나 perspective임.
  • filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
  • contain 속성이 paint임.

Position

Containing Block을 찾아가는 과정 덕분에, Position 속성이 아래와 같이 동작하는 것이다.

Static

position: static position 속성은 기본값으로 static이란 값을 가지고 있다.
static은 html에 정의된 순서대로 브라우저 상에서 보여준다는 의미다.

relative

.container {
    left: 20px;
    top: 20px;
    position: relative;
}

position 을 relative로 변경하면, top과 left에서 20px씩 이동한 것을 확인할 수 있다.
relative는 원래(static일 때) 있어야 되는 자리에서 상대적으로 20px씩 이동한다는 의미다.

absolute

.container {
    left: 20px;
    top: 20px;
    position: absolute;
}

absolute는 내 아이템이 담겨있는 박스 안을 기준으로 한다.
즉, 부모 엘리먼트의 컨텐츠를 기점으로 이동한다는 의미다.

fixed

.container {
    left: 20px;
    top: 20px;
    position: fixed;
}

fixed는 부모 엘리먼트를 신경쓰지 않고 window를 기점으로 한다는 의미다.

sticky

.container {
    left: 20px;
    top: 20px;
    position: sticky;
}

원래(static일 때)있던 자리에 위치하지만, 스크롤링이 되어도 원래 있던 자리에 붙어있는 것을 의미한다.
최신의 css를 쓸 때 브라우저 호환성을 걱정해야 된다. 특히 IE나 Edge에서 안먹히는 기능이 있을 수 있는데, postCSS와 같은 프레임웍을 쓰면 Babel처럼 최신 문법에 prefix를 넣어, 호환이 안되는 브라우저에서도 동작하게 만들어준다.