요소의 출력 위치 결정 방식을 정의한다.
기본적으로 요소는 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
속성에서 요소의 위치를 계산하는 데 사용되는 위치 지정 체계를 결정짓는 값을 갖는 타입이다.
static | relative | absolute | sticky | fixed
기본적으로 방향별 위치를 지정하는 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
) 속성 값을 통해 유저 에이전트의 뷰포트 기준으로 위치가 지정된다. 상위 요소가 존재하는 경우 가장 가까운 상위 요소 중에서 position
속성 값이 relative
이거나 absolute
인 경우 그 상위 요소로부터의 방향별 절대적 위치를 갖지만 모든 상위 요소의 position
속성 값이 기본 값인 static
이거나 대상 요소가 position
값을 fixed
로 갖는 경우에는 상위 요소와 관계없이 유저 에이전트의 뷰포트를 기준으로 위치가 결정된다.
대상 요소는 유저 에이전트의 뷰포트 내에서 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
)과 같은 위치 지정 속성을 통해 방향별 절대적 위치를 갖고 고정되어 스크롤되지 않는다.
대상 요소의 직전 요소가 position
속성 값이 static
또는 relative
인 요소가 있다면 그 요소를 기준으로 left
(또는 inset-inline-start
), top
(또는 inset-block-start
) 위치 속성으로 위치를 지정할 수 있다. right
와 bottom
속성은 사용할 수 없다.
기본 값이며 마크업 순서대로 요소가 가지고 있는 기본 적인 속성에 따라 위치를 잡는다.
대상 요소를 일반적인 흐름에 배치하고 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상 요소와 블록 레벨 조상 요소를 기준으로 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
) 속성 값에 따라 오프셋을 적용한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
기본 값이며 마크업 순서대로 요소가 가지고 있는 기본 적인 속성에 따라 위치를 잡는다.
대상 요소의 직전 요소가 position
속성 값이 static
또는 relative
인 요소가 있다면 그 요소를 기준으로 left
(또는 inset-inline-start
), top
(또는 inset-block-start
) 위치 속성으로 위치를 지정할 수 있다. right
와 bottom
속성은 사용할 수 없다.
하위의 absolute 값을 갖는 요소의 위치 기준이 될 수 있다.
기본적으로 방향별 위치를 지정하는 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
) 속성 값을 통해 유저 에이전트의 뷰포트 기준으로 위치가 지정된다. 상위 요소가 존재하는 경우 가장 가까운 상위 요소 중에서 position
속성 값이 relative
이거나 absolute
인 경우 그 상위 요소로부터의 방향별 절대적 위치를 갖지만 모든 상위 요소의 position
속성 값이 기본 값인 static
이거나 대상 요소가 position
값을 fixed
로 갖는 경우에는 상위 요소와 관계없이 유저 에이전트의 뷰포트를 기준으로 위치가 결정된다.
대상 요소를 일반적인 흐름에 배치하고 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상 요소와 블록 레벨 조상 요소를 기준으로 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
) 속성 값에 따라 오프셋을 적용한다.
대상 요소는 유저 에이전트의 뷰포트 내에서 left
(또는 inset-inline-start
), top
(또는 inset-block-start
), right
(또는 inset-inline-end
), bottom
(또는 inset-block-end
)과 같은 위치 지정 속성을 통해 방향별 절대적 위치를 갖고 고정되어 스크롤되지 않는다.
object.style.position = "relative";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Positioned Layout Module Level 3 | Last review date: 2022-7-19 |