1. position

문서 상에 요소를 배치하는 방법을 지정

2. position 종류

static

요소를 일반적인 문서 흐름에 따라 배치(기본 설정값)

<span>spanA</span>
<span>spanB</span>
<span>spanC</span>
<div>div</div>

span,div{
  background:blue,
  border : 1px solid red;
}

차례대로 왼쪽에서 오른쪽 , 위에서 아래로 쌓임

relative

static인 상태를 기준으로 주어진 픽셀만큼 움직임(top,bottom,right,left 를 쓸 수 있음) 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top,right,bottom,left 값에 따라 오프셋(다른 요소에는 영향을 주지 않음)을 적용

<span class="top">spanA</span>
<span class="right">spanB</span>
<span class="bottom">spanC</span>
<div class="left">div</div>

absolute

요소가 일반적인 문서 흐름을 따르지 않고(static 상태가 아니라는 뜻), 페이지 레이아웃에 공간을 배정하지 않음 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치, 단, 조상 중 위치 지정요소가 없다면 초기 컨테이닝 블록을 기준으로 삼음 최종 위치는 top,right,bottom,left 값이 지정 absolute는 position: relative,absolute,fixed 속성을 가진 부모태그를 기준으로 움직임 부모태그 중 position : relative,absolute,fixed 속성을 가진 태그가 없다면 가장 위의 태그인 body태그가 기준이 됨

fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치 요소의 조상 중 하나가 transform,perspective,filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼음 최종 위치는 top,right,bottom,left 값이 지정