[CSS] position: fixed가 깨지는 현상 (feat. transform)

 

position: fixed는 뷰포트를 기준으로 요소를 배치하는 속성이다. 따라서, 상대적이지 않고 항상 동일한 위치에 배치된다.

그런데 position: fixed를 사용했음에도 불구하고 지정한 위치에 배치되지 않는 경우가 있다.

 

부모 또는 조상 요소의 transform 속성에 translate, translateX, translateY, translate3d 등을 사용하면 영향을 받아 position: fixed 된 자손 요소도 위치가 바뀌게 된다.

 

따라서 올바르게 position: fixed 요소를 배치하려면 transform 속성을 사용하지 않은 조상 요소의 하위 요소로 옮겨야 한다.

 

 

참고자료

https://blog.pumpkin-raccoon.com/120

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