6.5.1 position 속성
position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다.
형식
position:<속성값>;
사용할 수 있는 속성값은 다음과 같습니다.
표 6-16 position 속성값
|
속성값 |
설명 |
|
static |
요소를 기본 흐름에 따라 배치합니다. |
|
relative |
요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있습니다. |
|
absolute |
요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다. |
|
fixed |
요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다. 단, 스크롤해도 해당 위치에 고정되어 있습니다. |
|
sticky |
요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정됩니다. |
위치와 관련한 속성값은 매우 중요하므로 자세히 살펴보겠습니다.
● static
position 속성값을 static으로 지정하면 아무런 변화가 없습니다. 좌표 속성을 사용할 수 없으며 위치 속성을 사용하지 않았을 때와 같습니다.
Note 기본값
위치 속성을 사용하지 않을 때와 같다면 왜 이런 값이 존재할까요? 바로 static과 같은 값이 기본값이기 때문입니다. 6.1.1 기본 스타일 시트에서 웹 브라우저는 기본 스타일 시트를 가지고 있다고 했습니다. 이때 기본 스타일 시트에 정의된 속성과 값을 기본값이라고 합니다.