position

position은 속성을 통해 문서상에 요소를 배치는 방법이다.

relative

relative는 자체로는 특별한 의미가 없으며 위치를 나타내는 top, bottom, left, right라는 프로퍼티를 사용해야 이동이 가능하다.

selector {
posituin: relative;
top: 20px;
left: 20px;
}

absolute

absolute의 경우 부모 태그의 존재의 경우 해당 부모에 절대적 움직임을 갖게 된다.
부모 태그로는 relative, fixed, absolute가 존재한다.

selector {
posituin: absolute;
top: 20px;
left: 20px;
}

위의 relative와 다르게 해당되는 부분의 절대적위치로 움직인다.

fixed

fixed는 말그대로 고정한다는 뜻이다.
absolute와 다르게 부몬가 필요없으며 브라우저내에서 움직임에 따라 항상 노출되며 주로 navbar, 광고등의 노출을 예라고 할 수 있다.

selector {
position: fixed;
top: 0px;
right: 0px;
}

위의 경우 맨 위, 오른쪽 끝에 항상 고정을 의미한다.