[CSS] Position 속성

CSS에서 HTML 요소를 원하는 위치에 배치하기 위해 Position 속성을 사용합니다.
Position 속성은 위치 지정을 위해 top, left, right, bottom 과 같이 사용됩니다.

postion: static

position 속성을 지정하지 않으면 기본값인 static이 적용됩니다.
HTML에 작성된 순서대로 화면에 표시되며
top, left, right, bottom 속성 값은 무시됩니다.

position: relative

relative로 설정하면 해당 요소를  원래 위치에서 벗어나게 배치할 수 있습니다.
원래 위치에서 상대적으로 배치한다고 생각하면 되며 top, left, right, bottom 속성을 이용하여
원래 위치에서 얼마나 이동할지를 지정할 수 있습니다.

position: absolute

absolute로 설정하면 상위 요소 중 static이 아닌 요소의 배치를 기준으로 설정됩니다.
만약, static이 아닌 요소가 없다면 body가 기준이 됩니다.
absolute로 설정할 때 부모의 요소를 relative로 지정해주는 것이 관례입니다.

position: fixed

fixed로 설정하면 화면을 위 아래로 스크롤 하더라도 특정 부분에 고정되어 움직이지 않는 요소로 만들어 줍니다.
특정 사이트에서 고정 헤더나 채팅 버튼을 구현할 때 많이 사용합니다.
브라우저 전체 화면을 기준으로 top, left, right, bottom 속성으로 위치를 설정합니다.

position: sticky

sticky 속성은 브라우저 화면을 스크롤 할때 효과가 나타납니다.
일정 위치 이하로 스크롤을 내리면 해당 요소가 고정되는 효과를 구현할 수 있습니다.

 

출처: https://www.daleseo.com/css-position/

CSS의 position 속성으로 HTML 요소 배치하기