position : fixed 속성이 깨지는 이슈 (transform)

 position : fixed 속성이 깨지는 이슈는 여러가지가 있습니다. 보통 fixed 스타일을 탑에 컴포넌트를 고정시키기 위해 사용하는데,

대게 이 경우 부모 요소에 css가 적응이 안되어 있다거나, z-index가 겹쳐서 스타일이 깨질 수도 있습니다.

 

물론 위에 두개가 아닌 다른 이유도 많습니다. 오늘은 그 중 부모요소에 transform을 설정해서 깨지는 이슈에 대해 알아보겠습니다.

우선 fixed 속성은 요소의 위치를 뷰포트에 상대적으로 지정합니다. 그 덕분에 페이지의 스크롤을 움직여도, 고정된 위치에 출력이 되는 것이죠.

 

하지만 부모 요소에 transform 속성을 적용하면 이야기가 달라지게 됩니다. transform이 적용된 컴포넌트는 새로운 뷰포트로 설정이 되는데, 이 때 자식요소의 스타일에 fixed 속성이 적용되어 있으면 설정된 뷰포트가 자식에게도 영향을 미치게 됩니다. 

덕분에 스크롤을 움직이면 부모요소를 따라서 fixed가 적용된 자식도 따라서 오게 되는 것이죠.

 

여기서 fixed 속성을 적용시킬려면 두가지 방법이 있습니다. 하나는 부모의 transform을 제거하는 것이고, 다른 하나는 position : sticky를 적용하는 겁니다.

sticky는 fixed와 달리 공간을 차지한다는 단점이 있지만, 스타일을 이용한다면 어렵지 않게 그부분을 해결할 수 있습니다