[CSS] position 속성

position 속성 

 - css에서 position 속성은  HTML 문서 상에서 요소가 배치되는 방식을 결정.

 - 정확한 위치 지정을 위해서는  top, left, bottom, right 속성과 함께 사용

 

static

- position 속성을 따로 지정해주지 않았다면, 기본값인 static이 적용.

- position :  static; 으로 되어있으면 HTML에 작성된 순서대로 화면에 표시하라는 의미이기 때문에

    top, left, bottom, right 속성을 작성해도 무시된다.

 

 

 

relative

- position : relative; 로 되어있으면, 이 요소를 원래 위치 기준으로 상대적 ( relative )으로 위치를 지정한다는 의미이므로,  top, left, bottom, right 속성을 이용하여 원래 위치에서 얼만큼 이동시킬지 설정해주면 된다.

 

예) 

 

position: relative;

top: 50px;

left: 50px;

 

 

 

absolute

- 위치가 설정된 부모요소를 기준으로 위치를 설정 

  (위치가 설정된 조상요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치 설정 ) 

 

 

 

fixed

-  뷰포트( view port ) : 브라우저 전체화면

   를 기준으로 위치를 설정하는 방식.

 

sticky

- 스크롤 될때 미리 설정한 값의 위치에 고정되어 배치됨.

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/position