CSS position 속성

정의와 사용법

position 속성은 요소의 정위치 유형을 정의합니다.

설명

이 속성은 요소 레이아웃을 구성하는 위치 메커니즘을 정의합니다. 어떤 요소든 위치를 설정할 수 있지만, 절대적이거나 고정된 요소는 어떤 요소든 블록 단위 테이블을 생성합니다. 상대 위치 요소는 정상적인 흐름의 기본 위치에 대해 이동합니다.

다른 것을 참조하세요:

CSS 강의:CSS 위치

HTML DOM 참조 매뉴얼:position 속성

예제

h2 요소 위치 설정:

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

직접 시도해보세요

CSS 문법

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

속성 값

값 설명
absolute

절대 위치를 생성하는 요소는 static 위치 이외의 첫 번째 부모 요소에 대해 위치를 설정합니다.

요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
fixed

절대 위치를 생성하는 요소는 브라우저 창에 대해 위치를 설정합니다.

요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
relative

상대 위치를 생성하는 요소는 정상적인 위치에 대해 위치를 설정합니다.

따라서, "left:20"은 요소의 LEFT 위치에 20 픽셀을 추가합니다.
static 기본값. 위치를 설정하지 않으면, 요소는 정상적인 흐름에 나타납니다. (top, bottom, left, right 또는 z-index 선언을 무시합니다).
inherit position 속성의 값을 부모 요소에서 상속해야 합니다.

기술 세부 사항

기본값: static
상속성: no
버전: CSS2
JavaScript 문법: object.style.position="absolute"

TIY 예제

위치: 상대 위치
이 예제에서는 요소의 정상적인 위치에 대해 위치를 설정하는 방법을 보여줍니다.
위치: 절대 위치
이 예제에서는 요소를 위치시키기 위해 절대값을 사용하는 방법을 보여줍니다.
위치: 고정 위치
이 예제에서는 요소를 브라우저 창에 대해 위치를 설정하는 방법을 보여줍니다.
요소의 형태 설정
이 예제에서는 요소의 형태를 설정하는 방법을 보여줍니다. 이 요소는 이 형태 안에 잘라져 나타납니다.
Z-index
Z-index는 요소를 다른 요소 뒤에 배치하는 데 사용될 수 있습니다.
Z-index
위의 예제에서 요소의 Z-index가 변경되었습니다.

브라우저 지원

표의 숫자는 이 속성을 최초로 지원한 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
1.0 7.0 1.0 1.0 4.0