CSS에서 position 속성은 HTML 문서상에서 요소가 배치되는 방식을 결정한다.
1. positon : static
static 은 position 속성의 디폴트 값으로 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
즉, 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며 이 때 position 과 같이 쓰는 top left right bottom 값은 무시된다.
2. position : relative
속성값 relative 는 요소의 원래위치 기준으로 상대적으로 배치해 줄 수 있는 속성값이다.
요소의 위치지정은 top left right bottom 속성을 이용해 원래위치로부터 얼마나 떨어지게 할지 설정할 수 있다.
3. position : absolute
속성값 absolute 는 요소의 배치기준이 자기자신이 아닌 상위요소에서 기준을 잡는다. DOM 트리를 따라 올라가다가 position 속성이 static 이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.
보통 가장 가까운 상위 요소인 부모요소를 기준으로 top left right bottom 값이 변하는데, 이 때 부모요소의 display 속성을 relative 로 입력하여 기준이라는 것을 알려준다.
첫 번째 요소 아래에 바로 세 번째 요소가 배치되는이유?
position: absolute인 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다
4. position : fixed
속성값 fixed 는 화면을 스크롤 하더라도 브라우저 화면을 기준으로 고정되어 움직이지 않도록 만들어 준다.
요소의 배치기준이 자기자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면으로 top left right bottom 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다
position: fixed인 요소도position: absolute인 요소와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는다.
5. position : sticky
속성값 sticky 는 화면을 스크롤시 해당 요소에 설정한 top or bottom 값이 될때 요소를 고정시켜 움직이지 않도록 만들어 준다.
이때 position: static 인 세 번째 요소는 이에 구애받지 않고 화면에 따라 올라가는 것을 볼 수 있다.
