postion의 속성
css에서 postion 프로퍼티를 사용하면 html 코드와 상관없이
그리고싶은 어느 위치에나 요소를 그릴수 있다.
top,right, bottom, left라는 속성을 이용하여 요소를 배치한다.
즉, 문서상의 요소를 배치하는 방법을 지정한다!
postion:static
HTML 요소는 기본적으로 정적으로 배치된다.
정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않는다.
(기본값)
postion:relative
자체로는 특별한 의미가 없다.
top, right,bottom, left 속성을 설정하면 이동이 가능하다.
postion:absolute
이름과 같이 절대적인 위치에 둘 수 있다.
어떤 기준에서 절대적이냐하면 relative를 가지고 있는 부모 태그 기준으로 움직인다.
만약 위에 요소를 가진 태그가 없다면 최상위 바디 태그까지 올라간다.
postion:fixed
fixed는 말 그대로 고정됐다라는 뜻
뷰포트를 기준으로 배치된다.
즉, 페이지가 스크롤되더라도 항상 같은 위치에 유지.
top, right, bottom, left는 요소를 배치하는 데 사용된다.
absolute은 relative를 가진 부모가 필요했지만, fixed은 필요없다.
position:sticky
사용자의 스크롤 위치를 기준으로 배치된다.
