static: 고정( top left의 값의 영향을 받지않는다.)
fixed: 스크롤을 내려도 움직이지 않는다.
relative: 부모의 위치값이 기준이되고
부모가 자식의 영역을 인정한다.
absolute:부모가 자식의 영역을 인정하지 않는다.
위치값을 주지않으면 부모의 종속값을 받는다.
| 정적위치(static) | 상대위치 (relative) | 절대위치 (absolute) | 고정위치(fixed) | |
|---|---|---|---|---|
| 기준위치 | 자기위치 | 자기위치 | 문서(html), 시작 위치는 static 기준으로 원래의 위치에 맞춰져 있음. | 절대위치와 동일 |
| 부모의 크기 | 자식의 크기에 따라 변경 | 자식의 크기에 따라 변경되지만 위치를 변경함에 따라 부모의 크기가 변경되지는 않음 | 부모의 크기에 영향을 끼치지 않음 | 절대위치와 동일 |
| 자신의 크기 | width:100%로 부모의 크기를 따름 | width:100%로 부모의 크기를 따름 | 포함하고 있는 컨텐트의 크기 만큼 늘어남 | 절대위치와 동일 |
| offset 사용(left,right.top,bottom) | 불가 | 가능 | 가능 | 가능 |
| 스크롤 | 따라감 | 따라감 | 따라감 | 고정 |
