: 요소의 배치 방법을 지정
position : static | relative | absolute | fixed
- static을 제외한 나머지 속성 값은 좌표를 이용해 각 요소의 위치를 조절 ( top , bottom , left , right )
1. static
- 문서의 흐름대로 배치 (기본값)
- top , bottom , left , right 속성 사용 불가
- float 속성을 이용해 좌우로 배치 가능
2. relative
- 문서의 흐름 따라 위치 지정
- static처럼 나열한 순서대로 배치되나 top , bottom . . . 속성 사용 가능
3. absolute
- 문서의 흐름과 상관없이 원하는 위치에 배치 가능
이때 반드시 부모 요소는 position이 relative로 지정되어 있어야 한다
👉 즉, 배치할 요소를 감싸는 <div>
를 만들고 position을 relative로 지정해놓고 사용
4. fixed
- absolute처럼 문서의 흐름과 상관없이 원하는 위치에 배치
단, 부모 요소가 아닌 브라우저 창이 기준이 됨
- 배치되면 브라우저 창을 스크롤해도 계속 고정되어 표시