position

: 문서 상에 요소를 어디에 배치할지 지정하는 속성
top, right, bottom, left 속성과 함께 사용하여, 요소를 배치할 최종 위치를 결정한다.

static(기본값)

: 일반적인 문서의 흐름에 따라 배치되며, 상하좌우 속성값의 영향을 받지 않는다.

relative

: 일반적인 문서의 흐름에 따라 배치되며,
원래 위치를 기준으로 상하좌우 속성값에서 지정한 만큼 이동한다.

.position {
  position: relative;
  top: 30px;
}

absolute

: 일반적인 문서의 흐름에서 제거되며,
가장 가까운 position 지정 요소를 기준으로 상하좌우 속성값에서 지정한 만큼 이동한다.

• 가장 가까운 position 지정 요소가 div.container일 때, div.container 요소를 기준으로 이동

.container {
  position: relative;
}

.position {
  position: absolute;
  top: 30px;
}

• 상위 요소 중에 position 속성을 가진 요소가 하나도 없다면, 브라우저 화면을 기준으로 이동

.position {
  position: absolute;
  top: 30px;
}

fixed

sticky