position fixed 깨지는 이슈! fixed 사용 전 필수 상식

 

프론트엔드 개발을 하시는 분이라면 한 번쯤은 position: fixed를 사용해보셨을 것입니다. 헤더와 같이 고정적으로 따라다녀야 하는 화면을 개발할 때에 fixed가 매우 유용하게 쓰이곤 합니다. 그러나 fixed를 쓸 때 고려해야 하는 요소에 대해서는 많은 분들이 모르고 계신데요. 오늘은 fixed 속성이 깨지는 버그가 발생하는 원인과 해결책에 대해 다루어보겠습니다.

 

들어가며: position fixed 란?

position: fixed는 스크롤에 관계 없이 브라우저의 특정 위치에 요소를 고정하기 위해 사용되는 속성입니다. 보통 헤더에서 많이 사용되며, 확인해보니 현재 이 티스토리 블로그의 헤더도 fixed로 되어있네요.

 

 

 

이슈: position fixed 를 설정했는데 적용되지 않는 버그

그런데 가끔은 아래 gif와 같이 분명히 fixed를 설정했는데, 원하지 않는 위치에 나타나고 스크롤에 따라 이동하지 않는 경우가 있습니다. 해당 컴포넌트를 수정하지도 않았는데 말이죠.

(아래 상황은 개발자도구를 통해 다른 요소를 변형하여 상황을 재현하였습니다)

 

 

 

원인: 부모나 조상 컴포넌트의 transform 속성

이런 경우 대부분의 원인은 fixed 속성을 준 요소의 부모나 조상 컴포넌트에 transform 스타일을 사용했기 때문입니다.

 

왜 transform 사용이 버그를 발생시키는지 한 번 알아봅시다.

 

우선 CSS의 속성 중 position의 fixed는 요소의 위치를 viewport에 상대적으로 지정합니다. 그 덕분에 페이지가 스크롤되더라도, 사용자가 보는 화면 상에서 움직이지 않고 고정된 자리를 갖게 되는 것이죠.

 

만약 이러한 fixed를 가지는 요소의 조상에 transform 속성을 추가해서 좌표를 변경하게 되면, 페이지가 스크롤 될 때 움직이지 않아야 할 요소가 움직이게 됩니다. transform이 적용된 요소에는 새로운 viewport가 설정되고, 이러한 viewport에 fixed를 가진 자식 요소가 영향을 받기 때문입니다.

 

 

해결1: 조상 컴포넌트의 transform 제거하기

가장 쉬운 해결책은 부모나 조상 컴포넌트에서 원인이 되는 transform 속성을 제거하는 것입니다. fixed를 사용하는 것은 화면에 고정하는 것이기 때문에, 부모나 조상 요소에 transform을 주는 상황이 없는 것이 보다 적합한 것 같아 보이기도 합니다.

 

 

해결2: position sticky 사용하기

그러나 transform을 떼기가 어렵거나, 당장 사이드 이펙트가 클 것 같은 경우에는 쉽게 상위 컴포넌트의 속성을 바꾸기 어려울 수 있습니다. 그런 경우 한 가지 해결책은 position sticky를 이용하여 비슷하게 구현하는 것입니다. 비록 sticky는 fixed와 달리 공간을 차지한다는 특징이 있지만, 마진 등을 활용한다면 fixed 처럼 구현하는 것이 어렵지는 않습니다.

 

 

오늘은 fixed의 에러 상황에 대해 살펴보았는데요. 다들 원하는 화면을 구현하실 수 있기를 바라며, 그럼 오늘도 해피코딩하세요 :)