css 속성 position: fixed 사용시 부모 요소에 relative 이슈 해결

CSS의 position 스타일 속성에서 fixed를 사용하면 부모 요소가 아닌 웹문서(Document)의 root 영역인 뷰포트를 기준으로 정렬이 가능하게 됩니다. 다만 예외적인 케이스가 있는데요 ~ 이 경우 어떻게 해결하면 될까요?

! position: fixed; 예상대로 동작하지 않는 경우

이 경우 발생하는 문제는 하나입니다. 문서 전체를 기준으로 고정된 영역에 해당 엘리먼트가 노출되어야 하는데 부모 기준으로 설정된 위치가 적용되어 나타나게 됩니다. fixed 값을 사용하였지만 원하는 결과대로 나타나지 않죠. 이런 경우 스크롤을 이동할 경우 고정되야 할 엘리먼트가 이동할 수도 있는데요 ~ 해당 이슈의 원인 부터 알아보면 부모 요소의 스타일 속성에 있습니다.


부모가 특정 스타일 속성인 transform, filter, perspective를 가지는 경우 fixed가 absolute처럼 부모로부터 relative하게됨

이유는 부모 요소에 위의 세 가지 스타일 속성 중 하나라도 사용된 경우 자식 요소의 position: fixed;가 사용되지 않게 됩니다. 여기서 부모 요소가 바로 상위 단계의 부모 요소 만을 의미하지 않으며 부모의 부모 또는 그 이상의 스타일을 상속 받는 경우에 나타나게 됩니다.

예를들어 아래의 두 가지 엘리먼트 A, B는 동일한 스타일을 가졌지만 하나는 부모 요소가 filter 요소를 가지고 있다는 차이가 있습니다. 다르게 동작하는 것을 스크롤 이동시 확인할 수 있습니다.


위 예제는 동일한 스타일을 가진 두 엘리먼트가 어떻게 다르게 나타나는지 확실하게 보여줍니다. 참고로 위에 적용된 코드는 아래와 같습니다. 먼저 html 코드입니다.

다음으로 아래는 스타일입니다.


다시 돌아와서 이런 이유로 fixed를 사용할 경우 만약 예상대로 동작하지 않는다면? 부모에서 위 세 가지 요소가 사용된 부분이 있는지 확인이 필요합니다. 확인 결과 부모 요소 어느 곳에서 perspective, transform, filter가 사용된 경우가 있다면 해결을 위해서 해당 레이어가 아닌 다른 레이어에 사용하거나 아니면 부모의 스타일을 다른 방법으로 대체하는 것도 해결 방법이 될 것 입니다.


간단한 이슈지만 동일한 이슈가 발생했을 때 원인을 찾기 어려우니 알아두면 매우 유용할 수 있습니다.