position

엘리먼트의 위치를 컨트롤 할 수 있다.

• position 속성은 상속되지 않는다.
• position의 기본 속성은 static 이다.
  
  

속성 종류

static : 문서 흐름에 맞춘 기본 위치
relative : 해당 요소의 현재 기본 위치
absolute : 지정한 기준점을 기준으로 절대 위치
fixed : 지정한 위치에 고정시킴

position: static;

position의 기본값으로 위-왼쪽(0, 0) 에 배치된다.
top bottom left right 속성을 무시한다.

position: relative;

자신의 원래 위치 기준으로 지정값만큼 위치가 이동된다.
기존 위치가 0, 0 인 상태에서

position: relative;
top: 100px;
left: 50px;

값을 주면 아래로 100px, 오른쪽으로 50px 이동하게 된다.

position: absolute;

일반적으로 relative 속성을 가진 부모의 엘리먼트를 기준으로 위치가 이동된다.
해당 속성을 가진 부모를 찾아 위로 계속 올라가는데,
속성을 가진 부모가 없다면 브라우저 (상단-왼쪽)인 0, 0 값을 기준으로 삼는다.

position: fixed;

브라우저 창을 기준으로 위치가 이동하여 스크롤과 무관하게 특정 위치에 고정된다.
나중에 선언된 엘리먼트에 가려져 보이지 않을 때에는 z-index 를 통해 화면 위로 나와 보여지게 할 수 있다.