엘리먼트의 position 기본 값은 static
position: static
- left/right/top/bottom의 값을 무시함
position: relative
- left/right/top/bottom을 원래 있던 위치(부모아래)를 기준으로 움직임
position: absolute
- left/right/top/bottom을 html태그 기준으로 (X)
-> 정확히는 "가까운 조상 중에 position:static 이 아닌 조상을 기준으로" (모두 없으면 그때, html임)
- absolute를 하고, offset을 설정하지 않았다면 부모 밑에 그대로 있음
-> 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문
- absolute로 설정하게 되면 부모와의 링크가 끊김
-> 크기도 content크기로 바뀜 (따로 설정하면 됨)
position: fixed
- left/right/top/bottom을 화면 기준 (스크롤에 독립적)
- absolute와 마찬가지로 부모와의 링크가 끊김
-> 크기도 content크기로 바뀜 (따로 설정하면 됨)
cf) 우선순위 : left > right , top > bottom