CSS position 속성

position

문서 상에 내가 원하는 위치에 배치할때 position을 사용 할 수 있다.

position : static / relative / absolute / fixed / sticky

1. static
   포지션에 대한 속성 값이 없다면 position의 기본값, 즉 디폴트 값으로 주어진다.
   (기준이 없고, 좌표적용도 되어있지 않다.)

2. relative
   자신이 현재 위치해 있는 부분을 기준으로 하여 top, bottom, left, right값을 이용해 위치를 이동할 수 있다.

3. absolute
   부모요소를 기준으로 위치를 이동할 수 있다. 만약 부모태그에 기준이 없다고 body태그까지 쫓아 올라가게된다.
   그러므로 기준으로 잡고 싶은 부모태그를 postion: relative로 설정하고, 자식요소 태그를 position: absolute로 사용한다.

4. fixed
   기준이 브라우저(=뷰포트)이다. 다른요소와 스크롤에 영향을 받지 않는다.
   그말은 즉, 스크롤을 내려도 내가 정한 위치에 딱 붙어있다는 말이다.

5. sticky
   스크롤이 되는 페이지에서 기본적으로 사용되는 속성이다. 스크롤을 내리다가 내가 정한 위치부터 fixed와 같은 효과를 볼 수있다.