position 이란?

position 속성은 태그를 어떻게 위치 시킬지를 정의하는 css 속성이다.

position 의 값

• static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
• absolute: 절대 좌표와 함께 위치를 지정해줄 수 있다.
• relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
• fixed: 스크롤과 상관없이 항상 문서 최 촤측 상단을 기준으로 좌표를 고정한다.
• sticky: 위치에 따라서 동작 방식이 달라짐. 요소가 임계점 이전에는 relative와 같이 동작하고 그 이후에는 fixed와 같이 동작한다.

Static: 위치를 임의로 설정해 줄 수 없다.

relative: 문서의 일반 흐름에 따라 배치한 다음에 top,bottom,left,right 값을 기준으로 위치가 이동 된다.

absolute: 가장 가까운 위치에 있는 부모태그를 기준으로 위치가 지정 된다.

Fixed: 뷰 포트에 상대적으로 배치되므로 페이지가 스크롤 되더라도 항상 같은 위치에 유지된다.

sticky:상대와 고정 위치 지정을 합친것으로 생각할 수 있다.sticky 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게된다.