[CSS] Position 속성

Position 속성 5가지

1. static: 기준 없음, 배치 불가능(default)
2. absolute: Position 속성이 static이 아닌 부모요소를 기준으로 자신을 배치
3. relative: static에서의 자신의 위치를 기준으로 배치
4. fixed: 뷰포트를 기준으로 배치
5. stickey: 스크롤 영역을 기준으로 배치

기준점에서 자신을 배치

1. 기준점을 잡았으면(static은 해당없음) 기준점에서 위치를 이동할 수 있다
2. 기준점의 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 내부 방향으로 얼마만큼 떨어질 지 결정한다.

• top : 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정
• bottom : 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
• left : 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
• right : 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정

3. 자손이 absolute일 때 부모, 조상 전부 뒤져봐도 Position 값이 없는 경우? (Parent, GrandParent, 태그, 태그까지) window 객체의 viewport를 기준점으로삼는다. (DOM : Document Object Model)

출처 : https://creamilk88.tistory.com/197