[CSS] transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed가 적용되지 않는 이유

position: fixed 와 transform

 

transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed를 적용시키면 의도한대로 동작하지 않는 것을 볼 수 있다. 보통 뷰포트를 기준으로 요소를 위치시키기 위해 fixed를 사용하지만, transfrom이 적용된 요소의 내부에서는 transfrom 요소를 기준으로 배치가 되게 된다.

 

 

이유를 w3 공식문서에서 확인할 수 있었다. 

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

 

transform 속성이 적용되면 해당 요소는 컨테이닝 블록 영역을 형성하게 된다. 대부분의 요소는 컨테이닝 블록을 기준으로 크기와 위치를 계산한다. 이 생성된 컨테이닝 블록은 position: fixed 된 요소에도 영향을 미치기 때문에 뷰포트가 아닌 transform이 적용된  부모 요소를 기준으로 위치를 계산하게 되는 것이다.

 

 

참고

https://www.w3.org/TR/css-transforms-1/#transform-rendering

https://www.w3.org/TR/CSS2/visudet.html