Position 속성
CSS에서 position 속성은 HTML문서 상에서 요소가 배치되는 방식을 결정함.
위치 지정을 위해서 top,left,bottom, right속성과 함께 사용된다.
position: static
position의 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됨.
기본값이기 때문에 HTML문서상에서 원래 있어야하는 위치에 배치된다.
position:static일 경우 top,left,bottom, right속성이 무시된다.
position: relative
position의 속성을 relative로 설정하게 되면, 요소를 원래의 위치에서 벗어나게 배치할 수 있다. 요소를 원래 위치 기준으로 상대적으로(relative)로 배치해주는데, top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
position: absolute
이름은 절대적인데 절대적이지 않고 오히려 상황에 따라 요소의 배치가 달라진다.
자신이 기준이 되는게 아니라 상위 요소에서 자신의 배치기준을 따른다.
DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 요소가 배치 기준이 된다.
그냥 말로 쓰면 조금 짜증나보이는데 그냥 부모중에 position있는 부모를 따라서 그 위치를 기준으로 찾아간다고 생각하면 편하다. (static 제외)
position: fixed
마켓컬리나 혹은 네이버 웹툰 이용 시 스크롤을 따라 움직이는 화면
position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.
fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.
