[CSS] Element가 position: fixed로 고정되지 않는 문제

CSS의 속성 중 position의 속성 중 fixed는 요소의 위치를 viewport에 상대적으로 지정한다. 때문에 페이지가 스크롤되더라도 사용자가 보는 화면에서 움직이지 않고 고정된 자리를 가지게 된다.

 

이러한 fixed 속성을 가지는 요소의 부모 요소에 transform 속성을 추가해서 좌표를 변경하게 되면 페이지가 스크롤될 때 움직이지 않아야 할 요소가 움직이게 된다.

 

이렇게 고정하려고 fixed을 사용했는데 움직이는 이유는 부모 요소에 transform이 적용되면 해당 요소의 영역에 새로운 viewprot가 설정되고 이러한 viewport에 자식 요소가 position: fixed 속성을 가질 때 영향을 받기 때문이다.

 

아래의 테스트 코드로 테스트해보면 position: fixed 요소가 원하는 데로 움직이지 않는 모습을 확인할 수 있다.

 

<테스트 코드>

HTML 코드

<div class="parent">
	<div class="child">
	</div>
</div>

CSS 코드

.parent {
	height: 10000px;
	width: 1000px;
	background-color: red;
	transform: translateY(1px);
}
.child {
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: blue;
}