CSS position(static, relative, absolute, fixed, sticky)

position 속성은 요소들을 자유자재로 배치할 수 있도록 하는 중요한 속성 중 하나이다.

position 속성에는 static, realative, absolute, fixed, sticky 가 있다.

static

모든 태그는 기본적으로 static한 상태이며 static 속성을 따로 작성하지 않아도 된다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left 같은 속성 값을 사용할 수 없다.

relative

요소의 기본 위치(static)를 기준으로 요소의 위치를 설정하는 방식이다. relative도 static 처럼 요소를 나열한 순서대로 배치한다. static과 달리 top, right, bottom ,left 속성 값을 사용하여 위치를 지정할 수 있다.

absolute

absolute는 문서의 흐름(요소의 나열 순서)과 상관없이 top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치할 수 있다. 

이때 요소가 움직이는 기준점은 static을 제외한 위치 지정 속성(relative, absolute, fixed, sticky)을 가지고있는 가장 가까운 부모 요소 또는 조상 요소가 기준점이 된다.

그렇기 때문에 요소의 위치를 absolute로 지정하고자하면 위치를 지정하고자하는 요소 블럭의 부모 요소 또는 조상 요소에 position: relative와 같은 위치 지정 속성을 작성해주고 위치 시키고자 하는 요소에 absolute 속성을 적용하고 top, right, bottom, left 속성으로 위치를 지정할 수 있다.

단, 부모 요소 또는 조상 요소 중 위치 지정 요소가 없다면 해당 요소를 감싸고있는 컨테이닝 블록을 기준으로 위치를 지정할 수 있다. 

마지막으로 알고 있어야 할 점은 absolute 속성을 사용하면 block 요소인 div 태그도 컨텐츠 크기 만큼의 너비 만을 가지게 된다.

fixed

fixed 속성 값도 absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소나 조상 요소가 아닌 브라우저 창을 기준점으로 위치를 지정할 수 있다. fixed 속성을 이용하면 이름과 같이 브라우저 창을 스크롤 하더라도 계속 동일한 위치에 요소를 고정하여 화면에서 사라지지않고 계속 표시될 수 있게한다.

즉 fixed 속성은 화면에 절대적인 위치에 존재하며 스크롤을 내려도 처음 위치한 곳에 고정되어 보여진다.

sticky

sticky 속성은 사용자의 스크롤 위치에 따라 요소가 배치 된다. sticky 속성은 최초에는 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 요소를 고정 시킬 수 있다.