[CSS-layout] position 속성

position속성은 태그를 위치시키는 방법을 정의하며 하기의 5가지 방법을 갖는다

1. static

HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다.
별도 지정하지 않으면 적용되는 기본값이다.
top left bottom right 속성을 사용할 수 없다.

2. relative

HTML에 작성된 순서를 벗어나 세부 위치를 조정할 수 있다
이 때 top left bottom right 속성을 활용한다.

3.absolute

부모 요소를 기준으로 절대 위치를 잡는다.
이 때, 부모 요소는 통상 relative로 놓는다.
상위 요소의 속성값이 입력되지 않거나 static일 경우,
body기준으로 절대 위치를 잡는다.
이 때 top left bottom right 속성을 활용하여 세부 위치를 조정한다.

4.fixed

화면을 스크롤해도 고정되어있는 값으로, 상단헤더나 상담톡 연결 버튼 등이 있다.
속성값의 배치 기준은 viewport(브라우저 전체화면)이다.
이 때 top left bottom right 속성을 활용하여 세부 위치를 조정한다.

5.sticky

fixed와 유사해보이나, viewport 대신 스크롤박스에 고정한다.
이 때 top left bottom right 속성을 활용하여 세부 위치를 조정한다.