[CSS] Position

Position

Positon은 문서상 요소를 배치하는 방법이다. top, left, bottom, right 등의 속성과 함께 사용해서 위치를 지정한다. CSS에서 중요한 개념인 position에 대해서 정리해 보자!

1. static(기본값)
2. relative
3. absolute
4. fixed
5. sticky

position: static

• 기본값
• 문서의 흐름대로 쌓인다.
• left, top, right, bottom 영향을 받지 않는다.

position: relative

• static을 기준으로 상대적으로 움직인다.
• 제자리 종종 걸음
• left, top, right, bottom로 위치 지정
  
  

position: absolute

• 상위 요소 중에 static이 아닌 요소가 기준점이 된다.
• 상위 요소 중에 기준점이 없으면 body가 기준점이 된다.
• 주변 요소에 영향을 주지 않는다.
• 하지만 다른 요소와 겹칠 수 있다.
• 💡 다른 요소의 정렬에 영향을 주고 싶지 않을 때 사용한다. 흐름에서 빠져나와 상위 요소 중에서 static이 아닌 요소를 기준으로 위치를 지정하면 된다.
• transform: translate와 가운데 정렬할 때도 함께 사용된다.
  
  

position: fixed

• 항상 고정된 위치에 배치
• 주변 요소에 영향을 주지 않는다.
• 배치 기준이 뷰포트

position: sticky

• 기준점 이상을 넘지 않을 때는 relative처럼 동작하다가
  그 이상을 넘게 될 경우 fixed 처럼 동작한다.