IT/HTML & CSS

[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 깨지는 이슈..