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 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하