1. position: static
2. position: relative
3. position: absolute
4. position: fixed
5. position: sticky
css에서 position 속성은 html 문서에서 엘리먼트가 배치되는 방식을 결정한다. position 속성은 엘리먼트의 정확인 위치 지정을 위하여 top, left, bottom, right 속성과 함께 사용한다.
1. position: static
position 속성을 별도로 지정하지 않는다면 기본값인 static이 적용된다. position이 static인 엘리먼트는 html문서에 작성된 순서대로 브라우저 화면에 표시된다. static일 경우 top, left, bottom, right 속성값은 무시된다.
See the Pen Untitled by M-Sik (@M-Sik) on CodePen.
2. position: relative
relative 속성은 엘리먼트를 기존 위치에서 벗어나게 배치할 수 있다. 엘리먼트를 기존 위치를 기준으로 상대적으로 위치를 옮겨 배치하는 개념이다. 엘리먼트의 위치 지정은 top, bottom, left, right 속성을 이용해서 기존 위치 기준 얼마나 옮길지 지정할 수 있다.
See the Pen Untitled by M-Sik (@M-Sik) on CodePen.
3. position: absolute
position absolute 상태일때는 부모 엘리먼트를 찾아 올라가며 position이 static이 아닌 첫번 째 부모 엘리먼트를 기준으로 위치를 지정할 수 있다. 만약 부모 엘리먼트 중 position이 static인 엘리먼트가 없다면 body 엘리먼트를 기준으로 absolute 위치가 결정된다.
See the Pen Untitled by M-Sik (@M-Sik) on CodePen.
4. position: fixed
fixed속성은 엘리먼트 배치의 기준이 아닌 viewport 기준으로 엘리먼트를 고정시킬 수 있다. top, left, bottom, right 속성은 각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 엘리먼트의 위치를 정한다.
See the Pen Untitled by M-Sik (@M-Sik) on CodePen.
5. position: sticky
sticky 속성은 기본적으로 static과 같이 html문서에 작성된 엘리먼트의 위치를 갖는다. 하지만 top, bottom, left, right 등의 속성으로 위치를 지정하면 스크롤 시 해당 엘리먼트가 보이지 않으려고 할 경우 sticky속성으로 인해 top, bottom, left, right 등으로 설정한 위치를 fiexd와 같이 위치를 결정할 수 있다.
See the Pen Untitled by M-Sik (@M-Sik) on CodePen.