CSS Types

CSS Types

Editing

<position-scheme>

데브딕에서 지정한 색인용 자료 타입

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

구문

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

사용되는 키워드

키워드요약
absolute

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

fixed

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

relative

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

static

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

sticky

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

버전 명세

Modules
Module NameStatusSummary
CSS Positioned Layout Module Level 3

Last review date: 2022-7-19