css의 position
이번 글에서는 CSS의 position 속성에 대해서 알아보겠습니다.
position
position 속성은 HTML에서 요소가 배치되는 방식을 결정합니다.
모든 경우는 아니지만, position 속성은 요소의 정확한 위치 지정을 위해서
top, left, bottom, right 속성과 함께 많이 사용됩니다.
position: static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다.
static은 요소들이 HTML에 작성된 순서대로 브라우저 화면에 표시가 됩니다.
top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다.
position: relative
relative는 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해줍니다.
위에서 이야기한 top, bottom, left, right 속성을 이용해서,
요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.
position: absolute
absolute는 배치 기준이 상황에 따라 다르게 적용되고 요소의 위치를 배치시킵니다.
absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다.
DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정됩니다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.
position: fixed
fixed는 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.
fixed의 배치 기준은 자신이나 부모 요소가 아닌 뷰포트(viewport) 입니다.
top, left, bottom, right 속성을 통해 브라우저의 위치로 부터 상하자와에 얼마나 떨어져 있는지를 경정합니다.
position: sticky
sticky는 css에서 비교적 최근에 추가된 속성입니다.
sitcky로 설정된 영역은 설정된 위치에 도달하기 전까지는 static 속성처럼 행동하다가
설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성입니다.