CSS 참조 매뉴얼

CSS @규칙(RULES)

position CSS 속성은 요소가 어떻게 정위치되는지 정의합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 표기법에 대한 것입니다.

기본 값:	static
적용:	모든 요소
thừa kế:	없음
애니메이션 가능:	아니요.참조하십시오. 애니메이션 속성。
버전:	CSS 2、3
JavaScript 표기법:	object.style.position="absolute"

훌륭:position 이외의 요소 static으로 불리며 배치되는 것으로 불립니다. 그들은 스택 환경에서의 수직 위치는 z-index 속성이 결정합니다.

이 속성의 문법은 다음과 같습니다:

position: static | relative | absolute | fixed | sticky | initial | inherit

아래 예제는 position 속성을 사용하는 방법을 설명합니다.

예제

　　h1　{
　　　position: absolute;
　　　top:　100px;
　　　left:　150px;
　　}

주의: 프린팅 미디어 유형에 대해서는, 이 상자는 각 페이지에 표시되며, 페이지 상자에 대비하여 고정됩니다.即使是页面是通过一个视口看到的(例如，在“打印预览”的情况下)。

아래 표는 이 속성의 값을 설명합니다.

값	설명
static	이 요소의 상자는 정상적인 상자이며, 정상적인 흐름에 따라 레이아웃됩니다. 정적 상자에 대해서는top，right，bottom，left，z-index속성은 무시됩니다. 기본 값입니다.
relative	요소는 자신의 정상적인 위치(이를 정상 흐름의 위치라고 합니다)에 정위치됩니다.
absolute	요소는 자신의 위치가 고정된 첫 번째 조상 요소에 대한 정위치입니다.
fixed	이 요소는 화면의 뷰포트에 고정되어 있으며, 스크롤할 때 움직이지 않습니다. 인쇄할 때, 요소는 각 페이지에 인쇄됩니다.
sticky	이 요소의 위치는 상대적 배치된 상자와 유사하며, 가장 가까운 '스크롤 메커니즘'을 가진 조상에 '붙여넣습니다'.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 position 속성 값을 사용합니다.

position 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 1+ Google 크롬1+ 인터넷 익스플로러 4+ Apple 사파리 1+ 오페라 4+

다음 튜토리얼을 참조하십시오:CSS 위치，CSS 레이어。

관련 속성:top，right，bottom，left，z-index。