position 속성
| static |
기준 없음 (기본값) |
| relative |
요소 자신을 기준으로 배치 |
| absolute |
부모 요소를 기준으로 배치 |
| fixed |
뷰포트 기준으로 배치 |
| stickey |
스크롤 영역 기준으로 배치 |
Top, Bottom, Left, Right 속성
- top : 요소의 position 기준에 맞는 위쪽에서의 위치를 설정
- bottom : 요소의 position 기준에 맞는 아래쪽에서의 위치를 설정
- left : 요소의 position 기준에 맞는 왼쪽에서의 위치를 설정
- right : 요소의 position 기준에 맞는 오른쪽에서의 위치를 설정
relative
absolute
요소를 일반적인 문서 흐름에서 제거한다.
가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
- 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
- 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)
