junglast
Published on

position 속성이 fixed인 요소가 최상위 요소 기준으로 배치되지 않는 경우

CSS의 position 속성이 fixed로 설정되어 있는 요소는 기본적으로 문서의 최상위 요소인 <html>을 기준으로 배치됩니다. 다만, 여기에는 최상위 요소 기준으로 배치되지 않는 몇 가지 예외 케이스가 있었습니다. 이 글에서는 스펙에 나와 있는 fixed 요소 배치에 대한 몇 가지 내용을 간략히 정리하려고 합니다.

containing block

position: fixed인 요소는 엄밀히 따지면 문서의 최상위 요소 기준으로 배치되는 것이 아니라, 문서 내의 initial containing block을 기준으로 배치됩니다. 그런데 이 initial containing block은 브라우저 viewport에 의해 생성된 containing block을 의미하기 때문에, fixed인 요소는 <html> 요소를 기준으로 배치되는 것이 기본 동작입니다.

하지만, 다음의 경우에는 position: fixed인 요소가 속한 initial containing block이 아닌 다른 containing block에 의해 영향 받게 됩니다.

  • position: fixed 요소의 부모 요소들 중 한 개의 요소라도 transform 속성을 포함하고 있는 경우, 그 부모 요소는 새로운 containing block을 생성합니다.
  • position: fixed 요소의 부모 요소들 중 한 개의 요소라도 filterwill-change 속성을 포함하고 있는 경우, 그 부모 요소는 새로운 containing block을 생성합니다.
  • contain 속성의 값이 layout, paint, strict, content인 경우, 그 부모 요소는 새로운 containing block을 생성합니다.
  • container-type 속성의 값이 normal 이외의 값인 경우, 그 부모 요소는 새로운 containing block을 생성합니다.

따라서, fixed요소 상위에 위와 같은 조건을 만족하는 부모 요소가 있다면, 더 이상 <html>을 기준으로 배치되지 않고 이 부모 요소를 기준으로 배치됩니다.

예시

아래 예시에서 초록색 요소는 노란색 요소를 자식으로 갖고 있습니다. 노란색 요소에는 position 속성이 fixed로 지정되어 있습니다.

position: fixed인 요소가 최상위 요소 기준으로 배치되지 않는 경우

부모 요소(초록색 요소)에 별도의 transform과 같은 속성이 지정되지 않은 경우

부모 요소(초록색 요소)에 `transform` 속성을 지정한 경우
부모 요소(초록색 요소)에 transform 속성을 지정한 경우

두 번째 예시에서, 자식 요소(노란색 요소)는 positionfixed로 설정되어 있지만 최상위 요소(<html>)가 아닌 부모 요소를 기준으로 배치됩니다.