position : 배치 방법 지정하기
형식 - position : static | relative | absolute | fixed
- static (정적위치) : 요소를 문서의 흐름(순서)에 맞추어 배치. 기본값
- relative (상대위치) : 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음.
즉, 웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법. 자기 자신을 기준으로 함.
- absolute (절대위치) : 문서의 흐름과 상관없이 원하는 위치를 지정해 배치함. 부모 요소를 기준으로 함.
absolute 속성 값을 이용해 자유자재로 요소를 배치하기 위해서는 반드시 부모 요소가 relative로 지정되어 있어야 함.
- fixed (고정위치) : 브라우저 창 기준으로 지정한 위치에 고정해 배치함. 즉 창의 스크롤이 움직여도 사라지지 않고 고정된 위치에 그대로 있음. 뷰 포트를 기준으로 함
- relative, absolute, fixed 속성은 좌표를 이용해 각 요소의 위치를 조절함. (위치 : top, bottom, left, right 로 지정)
- 좌표값은 양수, 음수 모두 사용 가능
