The position property
CSS 에서 쓰이는 position 속성은 태그를 어떻게 위치시킬지를 정의한다.
position value에는 relative, fixed, absolute, static, sticky 와 같이 5가지가 있다.
1. position: relative;
relative 요소들은 원래 있던 위치를 기준으로 top, right, bottom, left 속성을 이용하여 지정할 수 있다.
2. position: fixed;
fixed로 지정된 요소는 스크롤을 해도 화면의 같은 자리에 고정되어있다.
(viewport에 relatively positioned 되어있다고도 설명할 수 있다.)
top, right, bottom, left 속성을 이용하여 화면에 나타나는 위치를 지정할 수 있다.
3. position: absolute;
absolute로 지정된 요소는 절대 좌표와 함께 위치를 지정해줄 수 있다.
4. position: static;
static 요소들은 기본값에 의해 자동으로 위치가 지정된다.
top, right, bottom, left 속성에 의해 영향을 받지 않는다.
5. position: sticky;
sticky 요소들은 static 요소들과 같이 움직이지만 스크롤이 임계점에 달하면 fixed 요소들과 같이 박스를 화면의 같은 자리에 고정할 수 있다.
