position

 

CSS position속겅은 문서 상에 요소를 배치하는 방법을 지정한다.

top, bottom, left, right속성이 요소를배치할 최종 위치를 결정한다.

 

static

position값을 지정하지 않았을때 기본값이다.

top, bottom, left, right, z-index영향을 받지않는다.

relative

자기 자신을 기준으로 top,bottom,left,right의 값에 따라 위치를 조정한다. 

위치가 바꼈을때 다른 요소에는 영향을 주지 않는다. 따라서, 레이아웃에서 요소가 차지하는 공간은 static일때와 같다.

absolute

가장 가까운 부모 요소 position: relative값을 기준으로 위치를 조정한다. 부모 요소가 position: relative를 가진 부모가 없다면, body를 기준으로 삼는다. 최종 위치는 top, bottom, left, right값으로 지정한다.

 

fixed

어떠한 컨텐츠의 위치를 고정시킬때 사용한다.뷰포트를 기준으로 위치를 조정한다. 최종 위치는 top, bottom, left, right값으로 지정한다.

 

sticky

sticky는 top, bottom, left, right중 하나의 속성이 필수이다.

자기의 위치에 static속성 처럼 있다가 자신을 지나면 fixed속성 처럼 고정된다.