position 은 static, relative, absolute, fixed 등이 있다.
이번에는 이 4가지 값만 살펴보려고 한다!

1. Position?

HTML의 tag의 위치를 결정한다.

1) static

: 디폴트! 기본 값이다! (tag는 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다!) 그래서 따로 써주지 않아도 된다.

2) relative

: static이었을 때를 기준으로 위치를 변경하고 싶을 때 position: relative; 를 사용한다.
top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다.

.top {
position : relative;
top : 5px
}

다만, 위에 있는 코드와 같이 top : 5px로 지정했을 때 위가 아닌 아래로 5px 이동하게 된다.
각각의 방향을 기준으로 태그 안쪽 방향으로 이동하므로 위로 이동하고 싶을 때는 음수 -5px로 변경해주면 된다.

3) absolute

이름처럼 특정 부모(position: static 속성을 가지고 있지 않은 부모!, 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다)를 기준으로 절대적으로 움직일 수 있다.

일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다.

참고로 absolute가 되면 div여도 더는 width: 100%가 아님.

4) fixed

눈에 보이는 화면을 기준으로 위치를 고정시킨다. 쇼핑몰에서 상품을 보려고 스크롤을 내릴때마다 맨 상단으로 올라갈 수 있는 고정된 top 버튼이라던가, home 버튼처럼 그 화면 그대로! 거기에 고정된다!

fixed도 absolute처럼 더는 div가 width: 100%가 아니다.