css position
- 기준 설정: position 속성
- 이동:
top
, bottom
, left
right
속성을 통해 요소의 최종 위치를 결정
position 속성
-
static
- HTML elements는 기본적으로
static
- 작성된 문서의 일반적인 흐름을 따름
top
, bottom
, left
right
속성에 영향 받지 않음
- 문서 상 위치: 유지
-
relative
static
위치(원래 위치)를 기준으로 상대적 위치 설정
top
, bottom
, left
right
속성을 적용하면, 요소의 시작 위치가 변경됨
- 문서 상 위치: 유지
-
absolute
- 문서의 흐름과 상관없이, 가장 가까운 position 요소를 기준으로 배치
- 부모 or 조상 요소 중, position 값이 설정된(static ㄴㄴ), 가장 가까운 요소
- 부모 or 조상에 position 값을 가진 요소가 없는 경우: viewport 기준
top
, bottom
, left
right
속성을 적용하면, 요소의 시작 위치가 변경됨
- 문서 상 위치: 유지X
- 일반적 문서 흐름에서 제거
- 아래 있는 요소가 해당 자리를 차지
-
fixed
- 문서의 흐름과 상관없이, viewport를 기준으로 배치
top
, bottom
, left
right
속성을 적용하면, 요소의 시작 위치가 변경됨
- 문서 상 위치: 유지X
- 일반적 문서 흐름에서 제거
- 아래 있는 요소가 해당 자리를 차지
-
sticky
- 기본적으로
static
- 화면이 스크롤 되어, static 위치를 유지할 수 없으면,
fixed
top, bottom, left, right
- top: 기준점 ~ 요소 시작점의 위쪽 거리
- bottom: 기준점 ~ 요소 시작점의 아래쪽 거리
- left: 기준점 ~ 요소 시작점의 왼쪽 거리
- right: 기준점 ~ 요소 시작점의 오른쪽 거리