Position이란?

position 이란 css 코드에서 html 문서 상의 요소들이 배치되는 방식을 결정하는 속성입니다.

쉽게 말해 요소들의 위치를 결정합니다.

Position 속성 종류

종류로는 static, relative, absolute, fixed, sticky 다섯가지가 있습니다.

이 요소들은 정확한 위치를 위해 top, left, bottom, right 속성과 함께 사용됩니다.

static

모든 태그들은 position 속성을 별도로 지정해주지 않으면 기본값인 static 적용됩니다.
position 속성이 static 인 요소는 HTML 문서 상에서 있어야 하는 위치에 배치됩니다.
그리하여 top, left, bottom, right 속성 값은 position: static 일 때 무시됩니다.

relative

position 속성을 relative 로 설정하게 되면 요소를 원래 위치에서 벗어나게 배치할 수 있습니다.

요소의 위치 지정은 top, bottom, left, right 속성을 이용해서 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정합니다.

.relative1{ position:relative; top: 15px; }

여기서 bottom 이 아닌 top 을 썼는데 왜 static1 아래로 갔을까요?
그 이유는 relative 속성은 각각의 방향을 기준으로 태그 안쪽으로 이동하기 때문입니다.

absolute

relative 가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute 는 position: static; 속성을 가지고 있지 않은 부모 요소를 기준으로 움직입니다.
만약 부모 요소 중에 position 이 relative, absolute, fixed 인 태그가 없다면 뷰포트가 기준이 됩니다.

위 코드를 보면 absolute 는 부모 태그 중 postion: relative 인 것이 없기 때문에 body 를 기준으로 가장 오른쪽으로 달라붙었습니다.
하지만 child는 부모 태그인 parent 가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었습니다.

참고로 absolute가 되면 div여도 더는 width: 100%가 아닙니다.!

fixed

position 속성을 fixed 로 지정하면 요소를 항상 고정된 위치에 배치할 수 있습니다.
이게 가능한 이유는 fixed 속성 값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문입니다.

sticky

position sticky 는 요소가 평소에는 relative 처럼 흐름대로 배치되다가,
스크롤로 특정 위치(top, left 등)에 도달하면 fixed 처럼 고정 되는 속성입니다.

.sticky{ position: sticky; top: 100px; }
위 코드는 .sticky 가 스크롤 되다가 top: 100px; 도달 하면 그 위치에 고정 된다는 의미입니다.