[HTML/CSS] position의 속성 5가지 (static, relative, absolute, fixed, sticky)

Position 속성 5가지

1. static (2차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( O )
- top, left, right, bottom 속성 사용 가능 여부** ( X )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O )

2. relative (2차원, 3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( O )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O )
- 부모가 absolute라면, 부모의 top, left, right, bottom 값에 따라 위치가 설정된다
- (위에서 조정된 다음) 원래 static 이었을 때의 자리를 기준으로 자신의 위치를 찾는다

3. absolute (3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( X )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( X )
- 브라우저 화면을 기준으로 위치가 설정될 수도, relative한 부모를 기준으로 위치가 설정될 수도 있다
  (fixed와의 차이점!)

4. fixed (3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( X )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( X )
- 브라우저 화면을 기준으로 위치가 설정된다 (기준점: 브라우저 왼쪽 위 꼭지점)

5. sticky (3차원 속성) 
- 기준점까지는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작한다
  그리고 특정 범위를 벗어나면 마지막 모습으로 해당 자리에 정지한다


** 참고: top, left, right, bottom은 정해진 기준(브라우저나 부모요소)으로부터
          얼마만큼 떨어졌나를 나타낸 것이다.


※ 출처 : 1) elice AI 트랙 과정
              2) https://engkimbs.tistory.com/922 [새로비]