position 속성 (좌표 이동)

나는 개인적으로 css가 가장 헷갈리고 기억이 안날때가 많다.
그래서 구글링할때가 많은데 내가 자주 헷갈려서 찾아봤던 것들을 대충 정리해보려 한다.
내가 보기위해 쓰는 글이라 가독성은 좀 떨어질지도..

position 특징
1. 좌표 이동 가능
2. 공중에 뜸

position 값 종류
- relative : 원래 위치가 기준
- absolute : 부모태그(position:relative를 가진)가 기준
- fixed : 현재 화면(뷰포트)이 기준
- sticky : 스크롤박스가 기준
- static : 좌표이동 X
- inherit : 부모 태그의 속성값을 상속받음

좌표 지정을 위해 left, right, top, bottom 속성과 함께 사용(static 제외)

absolute나 fixed 적용시 block 요소의 특징 상실

참고 - postion:absolute 를 준 요소를 가운데 정렬하기

.example {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 150px; /* width는 적당히 알아서 */
}