[CSS] Position에 대해 알아보자

position은 다섯가지로 분류된다.

 

1. static

2. relative

3. absolute

4. fixed

5. stickty

 

static

position 속성을 지정하지 않았을 때 기본값으로 적용되는 값이다.
요소들은 문서의 일반적인 흐름에 따라 배치된다.

top, bottom, left, right 속성을 사용할 수 없다.

 

relative

요소가 '원래 위치에 있을 때'의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
top, bottom, left, right 속성을 사용할 수 있다.

 

absolute

요소의 위치를 상위 요소 중 position 속성이 static이 아닌 가장 가까운 요소를 기준으로 이동시킨다.

만약 상위 요소 중 position 속성이 static이 아닌 요소가 없으면 body를 기준으로 이동한다.

top, bottom, left, right 속성을 사용할 수 있다.

 

앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다.

사용하기 까다로우므로 주의해야 한다.

 

fixed

요소의 위치를 브라우저 창을 기준으로 고정시킨다.

스크롤을 내려도 항상 같은 위치에 유지된다.

top, bottom, left, right 속성을 사용할 수 있다.

 

배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이다.

absolute와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는다.

 

sticky

요소의 위치를 자신이 원래 있던 위치를 기준으로 상대적으로 이동시키되,

화면이 스크롤될 때 특정 지점에서 고정시킨다.

top, bottom, left, right 속성을 사용할 수 있다.

 

relative와 fixed의 중간 형태로, 요소를 자신이 원래 있던 위치를 기준으로 상대적으로 이동하되,

스크롤이 특정 지점에 도달하면 고정된다.