프로토타이핑

호버 버튼 픽스 위치 오류

피그마 오픈카톡방2026. 3. 7.

질문사항

호버 시 버튼이 위로 이동하는 컴포넌트를 제작했는데, 픽스(fixed position)를 하면 자꾸 움직입니다. 이유가 무엇인가요?

답변

Fixed position 요소는 일반적으로 뷰포트에 고정되어 스크롤과 무관하게 유지됩니다. 하지만 다음과 같은 경우 움직이는 것처럼 보일 수 있습니다:

부모 프레임의 스크롤 동작: Fixed position 요소가 스크롤 가능한 부모 프레임 안에 있고, 해당 프레임이 스크롤될 때 Fixed position 요소가 부모 프레임의 스크롤 영역 내에서 움직이는 것처럼 보일 수 있습니다. Fixed position은 뷰포트 기준이므로, 부모 프레임이 아닌 최상위 뷰포트에 고정되어야 합니다.

오버레이(Overlay) 사용: 오버레이로 컴포넌트를 띄울 때, 오버레이 설정에 따라 Fixed position이 제대로 작동하지 않을 수 있습니다.

프로토타입 인터랙션 설정 오류: 호버 인터랙션 자체가 프레임의 위치를 변경하거나, 다른 요소를 밀어내는 방식으로 설정되어 있을 경우 Fixed position 요소가 상대적으로 움직이는 것처럼 보일 수 있습니다.

문제를 정확히 파악하려면 파일 구조와 프로토타입 설정을 확인해야 합니다. [공동작업장 파일](https://www.figma.com/file/uIVD6ewUdxEwX5oX7rRORe/%F0%9F%92%93figma-%EA%B3%B5%EB%8F%99%EC%9E%91%EC%97%85%EC%9E%A5-%EC%84%9C%EB%A1%9C-%EB%8F%84%EC%99%80%EC%9A%94%F0%9F%92%93?type=design&node-id=2301-241&mode=design&t=ScmBIj0Ath1v3Vc-4)을 참고하여 문제 해결에 도움이 될 수 있습니다.