Position 속성

Position은 CSS로 HTML 엘리먼트를 배치하는 방법을 나타내는 속성이다.

relative

relative는 해당 엘리먼트에 있어서 static과 다른 점은 크게 없다. 다만 relative 속성을 갖고 있는 엘리먼트의 하위 엘리먼트에게 영향이 있다. 해당 영향은 하위 엘리먼트 position 속성이 absolute 혹은 fixed일 때 영향이 있다.

absolute

absolute는 해당 엘리먼트 위치를 상위 엘리먼트 position 속성이 relative라면 상위 엘리먼트 기준으로 배치된다. 예를 들어 하위 엘리먼트에 top: 100px이라는 속성을 주었을 때 하위 엘리먼트는 뷰포트를 기준으로 움직이는 것이 아니라 relative 속성을 갖고 있는 상위 엘리먼트를 기준으로 위에서 부터 100px 떨어지게 되는 것이다. 그리고 상위 엘리먼트가 relative 속성을 갖고 있지 않다면 뷰포트를 기준으로 움직인다. 뷰포트는 창화면을 의미한다.

fixed

fixed는 해당 엘리먼트 위치를 상위 엘리먼트 position 속성이 relative라면 상위 엘리먼트 기준으로 배치된다. 다만 absolute와 다른 점은 absolute의 경우 문서 내 화면에 배치되지만 fixed 같은 경우 화면에 고정된다는 점이다. 따라서 예를 들면 absolute 엘리먼트는 스크롤 하면 화면에서 사라질 수 있지만 fixed 엘리먼트는 화면에서 절대 사라지지 않는다.

참고

1. MDN - Position
https://developer.mozilla.org/ko/docs/Web/CSS/position