transform과 position: fixed 관계 설명

 

transform이 적용된 부모 요소

position: fixed;인데 위치가 안먹힘!

 

 

왜 이럴까?

transform 속성이 적용된 요소는 새로운 viewport를 만든다.
그래서 자식에 position: fixed를 줘도,
원래 창 전체 기준이 아니라 그 새로 만든 영역 기준으로 위치가 잡혀버린다.
즉, 우리가 생각한 ‘고정된 위치’가 아니게 되는 것!

 

 

정리하면!

transform으로 위치 옮긴 부모 안에 있는 fixed는 ‘새로운 viewport’의 영향을 받아서 화면 전체 기준 위치 고정이 안 된다.
그래서 의도한 위치가 안 나오니 주의하자~!