Properties

Properties

Editing
  • account_tree
  • bug_report

position

요소의 출력 위치 결정 방식을 정의한다.

설명

기본적으로 요소는 static 값을 갖는다. 즉 마크업 순서에 따라 요소의 특성에 맞게 화면에 출력이 된다. 그러나 기본 값이 아닌 relative, absolute, fixed 값을 갖는 경우에는 화면에 출력되는 위치는 별도의 위치 속성(top, right, bottom, left) 값을 통해서 출력 위치를 지정할 수 있다.

사용 가능한 값 타입

〈position-scheme〉

position 속성에서 요소의 위치를 계산하는 데 사용되는 위치 지정 체계를 결정짓는 값을 갖는 타입이다.

  • static | relative | absolute | sticky | fixed
    CSS Positioned Layout Module Level 3

사용되는 키워드

  • absolute

    기본적으로 위치를 지정하는 left, top, right, bottom 속성 값을 통해 웹브라우저 뷰포트 기준으로 위치가 지정된다. 부모 요소가 존재하는 경우 부모의 position 속성 값이 relative이거나 fixed인 경우 부모 요소로부터의 절대적 위치를 갖지만 부모 요소의 position 속성 값이 기본 값인 static 이거나 하위 요소가 position 값을 fixed로 갖는 경우에는 부모 요소와 관계없이 웹브라우저의 뷰포트를 기준으로 위치가 결정된다.

  • fixed

    요소는 웹브라우저 뷰포트 내에서 top, right, bottom, left 와 같은 위치 속성 값을 통해 절대적 위치를 갖고 고정되어 스크롤되지 않는다.

  • relative

    직전의 요소가 position 속성 값이 static 인 요소가 있다면 그 요소를 기준으로 위치값을 갖는다. right, bottom 속성 값을 가질 수 없다.

  • static

    기본 값이며 마크업 순서대로 요소가 가지고 있는 기본 적인 속성에 따라 위치를 잡는다.

  • sticky

    요소를 일반적인 흐름에 배치하고 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상과 블록 레벨 조상을 기준으로 top, right, bottom left 값에 따라 오프셋을 적용한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • static | relative | absolute | sticky | fixed
  • object.style.position = "relative";CSS2

    자바스크립트 형식

테스트 도구

요소에 대한 position 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Positioned Layout Module Level 3

Last review date: 2022-7-19

지원 웹브라우저