Position

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

속성

static

기본값. 일반적인 문서 흐름에 따라 객체를 배치한다. top, right, botton, left, z-index 속성에 아무런 영향도 주지 않는다.

relative

static 기준으로 배치된다. 자기 자신을 기준으로 top, right, botton, left의 값에 따라 오프셋을 적용한다.

absolute

가장 가까운 상위 객체에 position: static;을 제외한 속성을 가지고 있는 객체를 기준으로 배치된다. static을 제외한 속성을 가지고 있는 상위 객체가 없으면 Body가 기준이 된다.

fixed

viewport에 상대적으로 위치하므로 페이지를 스크롤하더라도 항상 같은 위치에 표시된다.

viewport
사용자가 현재 볼 수 있는 웹페이지의 일부이다. 스크롤 바를 통해 페이지의 다른 부분으로 뷰포트를 이동할 수 있다.

sticky

사용자의 스크롤 위치를 기준으로 배치된다. 설정된 위치에 도달하기 전까지 static 속성처럼 행동하다가 그 후에는 fixed 속성처럼 행동한다.

z-index

position 속성이 설정된 엘리먼트에 대해서만 사용할 수 있다.

(사용자)
Layer 3
Layer 2
Layer 1
Layer 0 기본 렌더링 레이어
Layer -1
Layer -2
Layer -3

ex)