position 속성

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
static, absolute, relative, fixed, sticky 5가지 값을 가지며
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

position: static

position 속성의 기본( default )값 입니다.
일반적인 문서의 흐름에 따라 배치되고 임의로 설정해 줄 수 없습니다.
top, right, bottom, left, z-index 속성이 아무련 영향도 주지 않습니다.

top과 left 속성이 아무런 영향도 주지 못합니다.

position: relative

요소를 일반적인 문서의 흐름이 따라 배치합니다.
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 조정합니다.
z-index로 쌓이는 순서를 지정할 수도 있습니다.

position: absolute

요소를 일반적인 문서의 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
position 속성이 정의된 가장 가까운 조상 요소에 상대적으로 위치를 지정합니다.
block 레벨 요소에 position: absolute 또는 position: fixed 값이 적용되면 자동으로 너비를 최대한 활용하려는 특성이 사라지게 됩니다.

• 부모에 position 값이 지정되지 않은 경우
  

• 부모에 position 값이 지정된 경우
  

position: fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
대신 브라우저의 뷰포트를 기준으로 배치하고 스크롤을 해도 뷰포트 상의 위치가 변하지 않는다.
그러나, 조상 중 하나가 transform, perspective, filter 속성 중 하나라도 값을 가지고 있다면 그 조상을 기준으로 배치됩니다.

block 레벨 요소에 position: absolute 또는 position: fixed 값이 적용되면 자동으로 너비를 최대한 활용하려는 특성이 사라지게 됩니다.

뷰포트 기준으로 배치되어있다면 스크롤을 내려도 고정된 위치에서 보여진다.

position: sticky

요소를 일반적인 문서의 흐름에 따라 배치하고, 가장 가까운 조상을 기준으로 top, right, bottom, left값에 따라 위치를 적용합니다.
스크롤 되어도 기준이 된 조상의 안에서의 위치가 변하지 않는다.
position: sticky 값 만으로는 의미가 없고 top, right, bottom, left값 중 하나를 반드시 지정해야 합니다.



스크롤되어도 부모 안에서 설정된 위치 top:50px에 고정되어 보여지고 있습니다.