position : fixed 작동 안되는 경우

스크롤의 관계 없이 탑버튼, 헤더, 사이드바 등을 화면에 고정시키고 싶을때 css 의 position 속성을 사용한다.
늘 사용해왔던 것 처럼 이번에도 사이드바를 고정시키기 위해 해당 속성을 사용했지만,
의도했던 대로 요소가 고정되지 않았다.

해당 문제를 해결하기 위해 찾아본 결과 fixed 와 absoulte 의 경우, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다는 것을 알게됐다. -MDN Web Docs 참고

해결방법은 부모 요소 중 세 개의 속성을 가지고 있는 부분을 제거하여 해당 문제를 해결했다.
하지만, 필수적으로 transform 을 사용해야 한다면, transform 속성을 가지고 있는 부모 밖으로 빼내어 사용하면 된다.