Properties

Properties

Editing
  • account_tree
  • bug_report

position

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

설명

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

CSS Positioned Layout Module 3에서는 논리적인 위치 값으로 지정하는 inset-block-start, inset-block-end, inset-inline-start, inset-inline-end 속성이 추가되었다. 논리적인 위치 값은 콘텐츠의 writing-mode 속성에 따라 다르게 나타난다.

사용 가능한 값 타입

<position-scheme>

DEVDIC-Specified Data Types

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

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

사용되는 키워드

  • absolute

    CSS Positioned Layout Module Level 3

    기본적으로 방향별 위치를 지정하는 left(또는 inset-inline-start), top(또는 inset-block-start), right(또는 inset-inline-end), bottom(또는 inset-block-end) 속성 값을 통해 유저 에이전트의 뷰포트 기준으로 위치가 지정된다. 상위 요소가 존재하는 경우 가장 가까운 상위 요소 중에서 position 속성 값이 relative이거나 absolute인 경우 그 상위 요소로부터의 방향별 절대적 위치를 갖지만 모든 상위 요소의 position 속성 값이 기본 값인 static 이거나 대상 요소가 position 값을 fixed로 갖는 경우에는 상위 요소와 관계없이 유저 에이전트의 뷰포트를 기준으로 위치가 결정된다.

    Example
  • fixed

    대상 요소는 유저 에이전트의 뷰포트 내에서 left(또는 inset-inline-start), top(또는 inset-block-start), right(또는 inset-inline-end), bottom(또는 inset-block-end)과 같은 위치 지정 속성을 통해 방향별 절대적 위치를 갖고 고정되어 스크롤되지 않는다.

    Example
  • relative

    CSS Positioned Layout Module Level 3

    대상 요소의 직전 요소가 position 속성 값이 static 또는 relative 인 요소가 있다면 그 요소를 기준으로 left(또는 inset-inline-start), top(또는 inset-block-start) 위치 속성으로 위치를 지정할 수 있다. rightbottom 속성은 사용할 수 없다.

    Example
  • static

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

  • sticky

    CSS Positioned Layout Module Level 3

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

    Example

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

  • 〈position-scheme〉static

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

  • CSS Positioned Layout Module Level 3

    대상 요소의 직전 요소가 position 속성 값이 static 또는 relative 인 요소가 있다면 그 요소를 기준으로 left(또는 inset-inline-start), top(또는 inset-block-start) 위치 속성으로 위치를 지정할 수 있다. rightbottom 속성은 사용할 수 없다.

    하위의 absolute 값을 갖는 요소의 위치 기준이 될 수 있다.

  • CSS Positioned Layout Module Level 3

    기본적으로 방향별 위치를 지정하는 left(또는 inset-inline-start), top(또는 inset-block-start), right(또는 inset-inline-end), bottom(또는 inset-block-end) 속성 값을 통해 유저 에이전트의 뷰포트 기준으로 위치가 지정된다. 상위 요소가 존재하는 경우 가장 가까운 상위 요소 중에서 position 속성 값이 relative이거나 absolute인 경우 그 상위 요소로부터의 방향별 절대적 위치를 갖지만 모든 상위 요소의 position 속성 값이 기본 값인 static 이거나 대상 요소가 position 값을 fixed로 갖는 경우에는 상위 요소와 관계없이 유저 에이전트의 뷰포트를 기준으로 위치가 결정된다.

  • CSS Positioned Layout Module Level 3

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

    Example
  • 대상 요소는 유저 에이전트의 뷰포트 내에서 left(또는 inset-inline-start), top(또는 inset-block-start), right(또는 inset-inline-end), bottom(또는 inset-block-end)과 같은 위치 지정 속성을 통해 방향별 절대적 위치를 갖고 고정되어 스크롤되지 않는다.

구문

  • object.style.position = "relative";
    CSS2

테스트 도구

요소에 대한 position 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Positioned Layout Module Level 3

Last review date: 2022-7-19

지원 웹브라우저