문서나 브라우저 상에서 어디에 위치 될지를 지정.
relative, absolute, fixed의 속성값만 적용이 가능하며 가장 작은 숫자가 아래, 가장 큰 숫자가 위로 겹쳐짐.
마이너스 값 적용이 가능하면 마이너스 값은 클수록 아래로 감.
| 값 | 설명 |
|---|---|
| static (기본값) | 보통의 배치를 의미. 그 요소 본래의 박스를 생성하여 배치함. top, right, bottom, left의 각 속성을 지정해도 아무 변화 없음. |
| relative | 상대배치를 의미. 그 요소 본래의 박스를 생성하여 배치되지만 본래의 위치에서 상대적으로 이동되어 위치함. 이동거리는 top, right, bottom, left의 각 속성으로 지정. 뒤에 계속되는 요소의 박스는 이 박스가 본래 위치에서 이동되지 않은 것으로 여김. |
| absolute | 절대위치를 의미. 그 요소의 박스의 위치는 top, right, bottom, left의 각 속성으로 지정. 그값이 적용되는 요소는 뒤에 계속되는 요소의 배치에 영향을 주지 않고 마진을 설정한 때에도 다른 요소의 마진 겹침 현상이 일어나지 않음. 자신을 포함하는 상위 조상 Element 중에서 기본 위치가 아닌 포지션 설정값을 가진 가장 가까운 Element를 기준으로 이동. 부모 element의 위치지정(position) 속성을 relative 로 지정해야 함. 그렇지 않으면 엉뚱한 놈을 기준으로 삼을 수 있음. 원래 자신이 차지하고 있던 공간이 사라짐. 즉 다른 Element가 해당 공간을 차지한다. |
| fixed | 고정배치를 의미. 웹 브라우저 화면을 기준으로 위치를 이동. 그 요소의 박스는 'absolute'로 지정된 것뿐만 아니라 윈도우 스크롤 등의 영역이동에 대해서도 고정되고, 출력매체가 인쇄매체라면 각 페이지의 같은 위치에 출력됨. 박스의 위치는 top, right, bottom, left의 각 속성으로 지정. 그 값이 적용되는 요소는 뒤에 계속되는 요소에 영향을 주지않고 마진을 설정한 때도 다른 요소의 마진겹침 현상이 일어나지 않음. 원래 자신이 차지하고 있던 공간이 사라짐. 즉 다른 Element가 해당 공간을 차지함. |
| inherit | 위치 속성의 값은 부모 요소에서 상속 |