HTML태그 또는 요소의 위치를 지정하기 위해서 사용되는 position에 대해서 알아보자
position속성은 요소의 정확한 위치 지정을 위해서 top, right, bottom, left 속성과 함께 사용한다.
1. static(기본값)
포지션을 설정하지 않았을 때 기본적으로 설정되는 값이다.
left, right, top, bottom의 영향을 받지 않고 화면의 흐름대로 순서대로 나열된다.
즉, HTML 문서 상에서 원래 있어야 하는 위치에 배치된다.
2. relative
요소를 원래 위치에서 벗어나게 배치한다.
원래 위치의 공간은 차지하지만 top, right, bottom, left 속성에 따라서 원래위치에서 상대적인 위치로 이동하게 된다.
3. absolute
aboslute 포지션은 배치기준을 자신의 상위 요소에서 찾는다. position 속성이 static이 아닌 속성을 가진 요소 중에서 가장 가까운 요소를 기준으로 배치 된다.
만약 없다면 body가 배치의 기준이 된다. 또한 원래 위치의 공간을 차지하지 않는다.
위의 예시는 div의 상위 요소인 main태그의 position을 relative를 둠으로써 absolute포지션인 div가 이를 기준으로 위에서 25px 왼쪽에서 100px 떨어지게 배치된다.
4. fixed
화면을 위아래로 스크롤해도 고정되는 내비게이션처럼 부모요소가 아닌 뷰포트(viewport)를 기준으로 고정된 위치에 배치된다.
5. sticky
원래 위치에 있다가 화면을 스크롤할 때 화면에 따라서 같이 움직인다.
