position: 요소의 위치를 결정하는 속성
position 속성
- 레이아웃의 위치를 결정하는 속성, 5가지 종류가 있다.
static
- 요소를 일반 문서 흐름에 맞게 배치함. 일반적으로 position 지정을 하지 않았을 때의 기본값
absolute*
- 요소를 문서 흐름에서 제거한 후, 부모 요소 중에 position 값이
relative,absolute,fixed,sticky인 요소를 기준으로 위치를 결정함(static이 아닌 요소) - 부모 요소가 모두 static이라면 최상위 요소(body)를 기준으로 함 - 부모 요소에 relative 속성 적용할 것
- 다른 요소들과 겹칠 수 있고, 부모 요소의 위치에 영향을 미치지 않음
relative*
- 요소를 문서 흐름에 그대로 유지하면서, 원래 자신의 위치에 대해서 위치를 조정
- 다른 요소들과 겹치지 않기 때문에 일반 문서 흐름을 변경하지 않고 위치를 이동시킬 때 사용
fixed
- 요소를 뷰포트(viewport)에 상대적으로 고정시킴. 화면을 스크롤해도 사라지지 않고 항상 같은 위치에 유지됨
sticky
- 요소가 스크롤 되는 영역을 지나가면 일반적인 문서 흐름에 따라 배치됨
- 그러나 특정 위치에 도달하면 고정됨, 일종의
relative와fixed의 혼합된 속성으로, 특정 위치에 도달하면 고정되고, 그렇지 않으면 일반적인 문서 흐름에 따라 이동함 - 위치 지정 속성: position 속성이 적용된 요소의 위치를 정하는 방법(
static제외)- top: 요소의 위쪽 여백을 지정
- bottom: 요소의 아래쪽 여백을 지정
- left: 요소의 왼쪽 여백을 지정
- right: 요소의 오른쪽 여백을 지정
- 위치 값 단위: 양수, 음수, 백분율 등 다양한 형식으로 지정 가능
top: 20px;요소의 윗부분 끝을 현재 위치에서 20px 아래로 일치시킴bottom: 10%;요소의 아랫부분 끝을 현재 위치에서 부모 요소의 높이의 10% 위로 일치시킴left: -50px;요소를 현재 위치에서 왼쪽으로 50px 이동시킴right: 5vw;요소를 현재 위치에서 오른쪽으로 뷰포트 너비의 5% 이동시킴
