(css) position 속성 - 배치 방법 지정하기

웹 문서 안의 요소들을 자유자재로 배치해 주는 속성

텍스트나 이미지를 나란히 배치할 수 있고,

여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있음

속성 값	설명
static	요소를 문서희 흐름에 맞추어 배치합니다 (초기값)
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다.
absolute	원하는 위치를 지정해 배치합니다.
fixed	지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있음

static을 제외한 나머지 속성 값에서는 좌표를 이용해(top, bottom, left, right) 각 요소의 위치를 조절할 수 있음

1. static 속성 값 - 문서의 프름대로 배치하기

2. relative 속성 값 - 문서 흐름 따라 위치 지정하기
   static 처럼 나열한 순서대로 배치되지만, top, right, bottom, left 속성을 사용할 수 있음.
   (자신이 바로 기준점!)

3. absolute 속성 값 - 원하는 위치에 배치하기
   문서의 흐름과 상관없이 left, right, top, bottom 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있음.

   absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고, position을 relative로 지정해 놓고 사용해야 함.

   자유자재로 요소를 배치하기 위해서는 반드시 부모 요소가 relative로 지정되어 있어야 함

4. fixed 속성 값 - 브라우저 창 기준으로 배치하기
   absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만,
   부모 요소가 아닌 브라우저 창이 기준이 됩니다.

   브라우저 창의 왼쪽 위 꼭지점을 원점

   브라우저 창을 스크롤하더라도 계속 고정되어 표시됨.