position

CSS position 속성은 문서 상에 엘리먼트를 배치하는 방법을 지정한다. top, left, right, bottom 속성이 엘리먼트를 배치할 최종 위치를 결정한다.

-값으로 줄 수 있는 것.

• static : 엘리먼트를 일반적인 문서 흐름에 따라 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. 기본값임.
• relative : 엘리먼트를 일반적인 문서 흐름에 따라 배치하고, 원래 문서의 흐름대로인 자기 자신의 위치를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. 

• absolute : 엘리먼트를 일반적인 문서 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 relative가 적용이 되어있는 가장 가까운 부모 엘리먼트를 기준으로 배치한다. 단, 조상 엘리먼트 중에 위치 지정 요소 즉, relative가 없다면 초기 컨테이닝 블록을 기준으로 배치한다. 최종 위치는 top, right, bottom, left 값이 지정한다.

• fixed : 엘리먼트를 일반적인 문서 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다. 초기 컨테이닝 블록을 기준으로 배치한다. 단 요소의 조상 중 하나가 transform, perspective, filter속성 중 어느 하나라도 none이 아니라면 해당 속성이 있는 조상 엘리먼트를 컨테이닝 블록으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정한다.

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