Position속성은 요소들의 대략적인 위치가 아닌, 보다 세밀하게 제어하기 위한 속성이다.
position에 입력 할 수 있는 속성들은 각각 fixed, static, sticky, absolute등이 있다.
그 중, 몇가지의 특징을 알아보자면,
첫번째로 fixed라는 속성은 말 그대로 해당 요소를 고정 시키는 속성이다. fixed는 해당 요소의 위치를 고정시켜, 스크롤을 움직여도 화면내 똑같은 위치에 고정시킨다.
이는 웹 사이트내에서 자주 사용 되는 속성이고, 쉽게 확인 할 수 있는데, 웹을 둘러보다 스크롤을 움직일때 고정 되어있는 상단 메뉴바등이 좋은 예시이다.
두번째는 sticky로, 마찬가지로 단어에서 보여지듯이 붙어다니게 만드는 속성이다. fixed는 화면에 붙어서 움직이지 않는다는 느낌이었다면, sticky는 스크롤에 붙어서 움직인다는 차이점이 있다. 이 속성을 주로 볼 수 있는곳은, 웹사이트등에서 볼 수 있는 이동형 사이드메뉴등이 해당된다.
세번째는 absolute속성으로, 이 속성을 알기전에 먼저 relative의 설명을 먼저 하자면, relative라는 속성은 자기 자신을 기준으로 하는 요소로, relative만 적용시켰을때는 크게 다른점은 없다.
relative의 설명을 먼저 한 이유는, absolute의 위치를 정할때 부모요소중 relative를 가지고 있는 요소를 기준으로 움직이고, 아무도 position을 가지고 있지 않으면 body를 기준으로 절대위치를 고정하기 때문이다.
absolute가 적용된 요소는 일반 문서의 흐름에서 벗어나 강제적으로 특정 위치에 고정된다. 스크롤이나 화면의 움직임, 요소의 움직임에도 영향을 받지 않는 특징이 있다.
position 요소를 미세조정 하는 방법은 각각 top, bottom, left, right를 px단위로 입력하여 움직일 수 있고, absolute의 경우엔 기준이 되는 요소에서 입력한 값 만큼의 간격을 두고 위치하게 된다.
