[CSS] position 사용법

position은 웹상에 요소를 배치하는 방법을 지정합니다.

 

◎ static : 요소를 일반적인 문서흐름에 따라 배치합니다.

 

◎ relative : 요소를 일반적인 문서흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 

 

◎ absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 가장 가까운 위치된 조상 요소에 대해 상대적으로 배치합니다. 

 

◎ fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 배치합니다. 

 

◎ sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운 스크롤 되는 조상과 표관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left 값에 따라 오프셋을 적용합니다.