Position 이란,
: 문서 상에 요소를 배치하는 방법으로, position이 요소의 배치 방법을 결정하면
- top
- right
- bottom
- left
가 최종 위치를 결정하는 방식이다.
ex)
position : 이렇게 배치할 것이다.
top : 윗 면에서부터 ~만큼 배치할 것이다.
right : 오른쪽 면에서 ~만큼 배치할 것이다.
bottom : 아랫쪽에서 ~만큼 배치할 것이다.
left : 왼쪽에서 ~만큼 배치할 것이다.
position애는 다음과 같은 속성값을 지정할 수 있다.
| 속성값 | 의미 |
| static | 기본값으로, 요소의 일반적인 문서의 흐름에 따라 배치한다. |
| relative | 일반적인 문서 흐름에 따라 배치하되, 상하 좌우 위치 값에 따라 위치 이동 시킨다. |
| absolute | 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 위치 이동 시킨다. |
| fixed | 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정된다. |
| sticky | 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 위치 이동 시킨다. |
1. position : relative
ex)
만약, 뒤에 다른요소가 오게 된다면, 원래 요소가 있어야하는 위치로 간다.
따라서, 겹칠 수 있다. (마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게됨.)
2. position: absolute
ex)
: 위에서 부터 100px 떨어졌으나, absolute 성격상 문서흐름X, 상위요소중 가장 가까운 포지선 요소에 대해 위치가 변경됨.
: 만약, 상위요소중 포지션을 정의하고 있는 요소가 없는경우 absolute 요소는 브라우저 화면을 기준으로 잡고 위치가 변경됨.
: absolute요소 다음에 오는 요소들은 absolute가 없다고 생각하고 요소가 그 뒤에 쌓이게 된다.
3. position: fixed;
: 스크롤을 아무리 내려도 항상 같은 자리에 고정되게 하는 것.
