CSS position

사용 방법

- CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용됨.

- position 속성은 주로 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됨.

 

position: static

- position 속성의 기본값.

- HTML에 작성한 순서 그대로 브라우저 화면에 표시됨.

- 따라서 top, left, bottom, right 속성은 무시됨.

 

position: relative

- 요소를 원래 위치를 기준으로 상대적으로(relative) 배치 가능.

- 요소의 위치 지정은 top, bottom, left, righr 속성을 이용해 요소가 기존 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지를 지정함.

 

position: fixed

- 요소를 항상 고정된 위치에 배치 가능.

- 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체화면을 기준으로 요소 배치함.

- top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로부터 해당 요소가 얼마나 떨어져 있는지를 결정함.

 

position: sticky

- 설정된 위치(ex. top: 0px)에 도달하기 전까지는 static 속성처럼 동작하다가 설정된 스크롤 지점에 다다르면 fixed 속성처럼 요소를 고정시킴.

- sticky 속성은 필수적으로 top, bottom, left, right 중 하나를 설정해야함.

 

 

 

 

참고 : https://divheer.tistory.com/188