CSS position
속성은 문서 상에 element를 배치하는 방법을 지정한다. top
, right
, botton
, left
속성이 엘리먼트를 배치할 최종 위치를 결정한다.
기본값. 일반적인 문서 흐름에 따라 객체를 배치한다. top
, right
, botton
, left
, z-index
속성에 아무런 영향도 주지 않는다.
static
기준으로 배치된다. 자기 자신을 기준으로 top
, right
, botton
, left
의 값에 따라 오프셋을 적용한다.
가장 가까운 상위 객체에 position: static;
을 제외한 속성을 가지고 있는 객체를 기준으로 배치된다. static
을 제외한 속성을 가지고 있는 상위 객체가 없으면 Body
가 기준이 된다.
viewport
에 상대적으로 위치하므로 페이지를 스크롤하더라도 항상 같은 위치에 표시된다.
viewport
사용자가 현재 볼 수 있는 웹페이지의 일부이다. 스크롤 바를 통해 페이지의 다른 부분으로 뷰포트를 이동할 수 있다.
사용자의 스크롤 위치를 기준으로 배치된다. 설정된 위치에 도달하기 전까지 static
속성처럼 행동하다가 그 후에는 fixed
속성처럼 행동한다.
position
속성이 설정된 엘리먼트에 대해서만 사용할 수 있다.
(사용자)
Layer 3
Layer 2
Layer 1
Layer 0 기본 렌더링 레이어
Layer -1
Layer -2
Layer -3
ex)