position이란?

🗂 position을 어떻게 사용하는지 알려주세요

CSS의 속성중 하나로 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다.
position 속성을 이용하면 텍스트나 이미지같은 요소들을 원하는 곳에 위치시킬 수 있습니다.

• static : position속성의 기본 값으로 다른 요소와의 관계에 의해 자동으로 배치되고 top, left, right, bottom등의 offset 값을 지정해줄 수 없습니다.

• relative : 원래 있던 위치를 기준으로 좌표를 지정합니다. 원래 있던 위치는 position : static(default) 이었을 때를 기준으로 합니다.

• absolute : 원래 위치와 상관 없이 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. absolute 속성은 기준점이 중요합니다. absolute는 position 값이 static이 아닌 것 중 가장 가까운 요소(부모태그)를 기준으로 합니다.

• fixed : absolute속성과 비슷하게 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 정해줍니다. 반면 기준점은 뷰포트의 왼쪽 위 꼭지점으로 합니다.

• sticky : sticky는 기준점을 넘지 않을 때는 relative처럼 동작하다가 기준점을 벗어나면 fixed처럼 동작합니다. scroll이 계속되면 마지막 위치에서 멈춥니다. 일반적인 상황에서 sticky속성의 기준점은 부모요소가 됩니다.