여기서 한 가지 주의해서 살펴볼 부분이 있습니다. margin-top과 top은 속성은 다르지만 속성값으로 똑같이 100px을 적용했는데 왜 파란색 박스의 위치가 다른 걸까요?

fixed 속성값이 적용된 영역 안에 margin-top 속성을 적용하면 최초 파란색 박스가 생성된 지점을 기준으로 좌표가 설정됩니다. 하지만 top 속성을 적용하면 항상 브라우저 왼쪽 상단을 기준으로 좌표 기준점이 바뀝니다. 따라서 top 속성이 적용된 현재 상태에서는 브라우저를 기준으로 100픽셀만큼 내려오는 것입니다.