[CSS] position : relative, absolute, fixed

position 속성이란?

문서 상에 요소를 배치하는 방법을 지정하는 속성이며 top, bottom, left, right로 위치를 지정한다.
기본값으로는 static으로 가지고 있다.

1. relative

position: relative;
top: 40px; left: 40px;

static으로 가지고 있던 자기 자신의 위치에서 top, bottom, left, right만큼 위치를 이동시킨다.

2. absolute

position: absolute;
top: 40px; left: 40px;

static이 아닌 부모(해당 부모가 없다면 초기 컨테이닝 블록)의 위치에서부터 top, bottom, left, right만큼 위치를 이동시킨다.

3. fixed

position: fixed;
top: 20px;

뷰포트의 초기 컨테이닝 블록을 기준삼아 위치시키고 top, bottom, left, right만큼 위치를 이동시킨다.
*뷰포트는 대부분 <meta name="viewport" content="width=device-width, initial-scale=1.0" />로 dom에 선언되어 있기 때문에 브라우저의 width 윗쪽에 위치하게 된다.