1) static

  • position의 기본값, 따로 설정을 안해주어도 기본적으로 static임
  • static인 상태에서는 top, left, ...와 같은 것을 사용해도 움직여지지 않음

2) relative

  • 원래의 공간에서 부모 박스에 따라 상대적으로 움직임

3) absolute

  • 근접한 부모중에 기본값이 스태틱이 아닌 부모의 기준에서 움직이게 됨
  • relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨

4) sticky

  • 부모의 박스에 기준에 따라 움직여짐
  • top, left와 같은 포지션을 꼭 지정해줘야함
  • 스크롤링이 될 때 fixed처럼 고정이 됨

5) fixed

  • 들어있는 박스랑 상관없이 viewport에 의해 움직여짐
  • 브라우저에서 보여지는 viewport에서 포지션변경이 일어남
  • 즉, body기준에서 움직여진다라고 보면됨

+ Recent posts