CSS 앵커 위치 지정 모듈 레벨 1

1. 소개

CSS 절대 위치 지정은 작성자가 박스를 페이지 어디든지 배치할 수 있게 해주며, 다른 박스의 레이아웃과 상관없이 오직 자신의 포함 블록만을 고려합니다. 이러한 유연성은 매우 유용할 수 있지만, 동시에 제약이 따르기도 합니다—​종종 다른 박스를 기준으로 위치를 지정하고 싶을 때가 있습니다. 앵커 위치 지정 (position-anchor 및 position-area 속성, 또는 앵커 함수 anchor(), anchor-size() 활용) 를 통해 작성자는 절대 위치 박스를 페이지의 하나 이상의 다른 박스(그 앵커 참조)에 “앵커링”할 수 있습니다. 동시에 여러 가지 위치를 시도하여 겹침이나 오버플로우를 피하는 “최적”의 위치를 찾을 수도 있습니다.

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  /* Fixpos는 포함 블록 관계를 걱정할 필요가 없다는 의미입니다.
     툴팁은 DOM 어디서든 존재할 수 있습니다. */
  position: fixed;

  /* 모든 앵커링 동작은 기본적으로
     --tooltip 앵커를 참조하게 됩니다. */
  position-anchor: --tooltip;

  /* 툴팁의 하단이 앵커 상단에 정렬되도록 합니다.
     이는 또한 가로 쓰기 모드에서 툴팁과 앵커가 수평 중앙 정렬되는 것도 기본 설정입니다. */
  position-area: block-start;

  /* 만약 툴팁이 윈도우를 넘치면 자동으로 전환해서
     툴팁의 상단이 앵커의 하단에 정렬되도록 합니다. */
  position-try: flip-block;

  /* 너무 넓어지는 것을 방지 */
  max-inline-size: 20em;
}

.tooltip {
  /* popover + popovertarget 속성을 사용하면 'position: fixed'가 설정되고
     필요한 position-anchor 관계가 이미 만들어집니다. */
  position-area: block-start;
  position-try: flip-block;
  max-inline-size: 20em;
}

1.1. 값 정의

이 명세서는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에서 정의되지 않은 값 타입은 CSS 값 및 단위 [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과 조합하면 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 나열된 속성별 값 외에도, 이 명세서에서 정의된 모든 속성은 CSS 전역 키워드를 속성 값으로 허용합니다. 가독성을 위해 별도로 반복적으로 적지 않았습니다.

선택자 매칭을 제외한 대부분의 CSS 동작과 마찬가지로, 이 명세서에 나오는 기능은 플랫(flat) 요소 트리에 적용됩니다.

2. 앵커 결정

이 명세서의 여러 기능은 앵커 박스의 위치와 크기를 참조합니다. 별도의 명시가 없는 경우, 이는 해당 border box 가장자리와, 관련 주요 박스 및 관련 앵커 요소를 의미합니다. 대부분의 경우 관련 앵커 요소는 기본 앵커 요소로 지정되며, position-anchor 속성을 통해 지정할 수 있습니다. 이는 호스트 언어에서 정의한 암시적 앵커 요소이거나, CSS anchor-name 및 anchor-scope 속성으로 이름이 지정된 앵커일 수 있습니다. (anchor() 함수로도 이름이 지정된 앵커를 직접 참조할 수 있습니다.)

앵커 박스의 위치와 크기는 레이아웃 이후에 결정됩니다. 이 위치와 크기에는 zoom 및 position 기반의 조정 (position: relative 또는 position: sticky 등)과 변형(transform, offset-path 등)이 포함됩니다. 이 경우, 관련 절대 위치 요소의 포함 블록 좌표계에서 앵커 박스의 축정렬 경계 사각형(axis-aligned bounding rectangle)이 사용됩니다. 변형은 종종 별도의 스레드에서 최적화되므로, 앵커 박스의 위치에 대한 변형 기반 갱신은 몇 프레임 지연될 수 있습니다. 실질적으로 가능하다면, 작성자는 대신 절대 또는 상대 위치를 사용하여 이 지연을 피할 수 있습니다.

앵커 박스가 분할(fragmented)된 경우, 해당 포함 블록이 절대 위치 박스의 관련 앵커 박스 외부인 경우, 박스 분할(box fragments)의 축정렬 경계 사각형이 대신 사용됩니다. (절대 위치 박스가 분할 컨텍스트(fragmentation context) 내부에 있으면 앵커 박스를 비분할로 간주하며, 해당 분할 컨텍스트에 의해 스스로도 분할될 수 있습니다.)

성능상의 이유로, 스크롤은 특별하게 처리되며, § 3.3 스크롤 반영을 참고하세요. 기타 레이아웃 후 효과(예: 필터)는 앵커 박스 위치에 영향을 주지 않습니다.

2.1. 앵커 생성: anchor-name 속성

<anchor-name> = <dashed-ident>

anchor-name 속성은 해당 요소가 앵커 요소임을 선언하며, 해당 요소의 주 박스(principal box)가 앵커 박스(anchor box)가 되도록 합니다. 또한 이 요소가 타겟팅될 앵커 이름(anchor names) 목록을 부여합니다. 값은 다음과 같이 정의됩니다:

none

이 속성은 아무런 효과도 없습니다.

<anchor-name>#

해당 요소가 주 박스(principal box)를 생성하는 경우, 이 요소는 앵커 요소(anchor element)가 되며 지정된 앵커 이름 목록을 가집니다. 각 앵커 이름(anchor name)은 느슨하게 일치하는 트리 범위 이름(tree-scoped name)입니다.

그렇지 않은 경우 이 속성은 아무런 효과도 없습니다.

앵커 이름(anchor names)은 유일할 필요가 없습니다. 모든 요소가 해당 박스의 타겟 앵커 요소(target anchor element)가 될 수 있는 것은 아닙니다. 따라서 사용 범위가 적절히 지정되는 한, 하나의 이름이 여러 곳에서 재사용될 수 있습니다.

참고: 여러 요소가 동일한 앵커 이름을 공유하며 모두 특정 위치 지정 박스에 대해 가시적인 경우, 타겟 앵커 요소(target anchor element)는 가장 가까운 조상(존재할 경우) 또는 DOM 순서상 마지막 요소가 됩니다. anchor-scope 속성을 사용하면 특정 참조 박스에서 어떤 이름이 보일지 더 제한할 수 있습니다.

앵커 이름(anchor names)은 기본적으로 컨테인먼트(containment)로 범위가 제한되지 않습니다. 요소에 스타일 또는 레이아웃 컨테인먼트(layout containment) (혹은 유사한 형태의 컨테인먼트)가 있더라도, 그 하위 요소의 앵커 이름(anchor names)은 페이지 내 다른 요소에서도 볼 수 있습니다.

참고: 요소가 다른 요소의 생략된 내용(skipped contents) 내에 있을 때 (예: content-visibility: hidden 등으로 인해) 그 요소는 허용 가능한 앵커 요소(acceptable anchor element)가 아니며, 실질적으로 이름이 없는 것처럼 동작합니다.

참고: 섀도우 트리(shadow trees) 내의 위치가 지정된 요소는 “상위(higher)” 트리에 정의된 앵커 이름(anchor names)을 참조할 수 있습니다. 현재로서는 “하위(lower)” 섀도우 트리에 정의된 앵커 이름(anchor names)은 참조할 수 없습니다.

2.2. 앵커 이름 범위 지정: anchor-scope 속성

이 속성은 지정된 앵커 이름과 해당 앵커 이름에 대한 조회 범위를 이 요소의 하위 트리로 한정합니다. § 2 앵커 결정을 참조하세요.

값은 다음 의미를 가집니다:

none

앵커 이름 범위에 변화가 없습니다.

all

이 값은 이 요소나 그 후손이 정의한 모든 앵커 이름이 (후손이 anchor-scope로 이미 범위가 제한되어 있지 않다면) 이 요소의 후손에게만 범위 내에 있도록 지정합니다. 그리고 후손이 이 앵커 이름만 이 하위트리 내의 앵커 요소에 일치하도록 제한합니다.

이 값은 동일 트리스코프 내 앵커 이름에만 영향을 미치며, 엄격히 일치(strictly matched) 트리 스코프 이름처럼 동작합니다. (즉, anchor-scope: all은 anchor-scope: --foo, --bar, ...와 동일하게, 모든 관련 앵커 이름을 명시적으로 나열한 것과 같습니다.)

<anchor-name>

이 값은 이 요소 또는 그 후손이 정의한(후손이 anchor-scope로 이미 범위가 제한되지 않은) 해당하는 앵커 이름만 이 요소의 후손에게만 범위 내에 있도록 지정합니다. 그리고 후손이 이 앵커 이름만 이 하위트리 내의 앵커 요소에 일치하도록 제한합니다.

<anchor-name>은 엄격히 일치하는 트리 스코프 이름을 의미합니다. 즉, 동일한 섀도우 트리 내의 앵커 이름과만 매칭될 수 있습니다.[CSS-SCOPING-1]

이 속성은 암시적(implicit) 앵커 요소에는 효과가 없습니다.

참고: 위치 지정된 요소의 조상이 우선적으로 체크되므로, 원하는 앵커가 조상인 경우 대개 anchor-scope를 사용할 필요가 없습니다. 원하는 앵커가 조상이 아니거나, 해당 앵커를 페이지 다른 곳에서 참조되지 않게 "숨기고" 싶을 때만 필요합니다.

li {
  anchor-name: --list-item;
  anchor-scope: --list-item;
}
li .positioned {
  position: absolute;
  position-anchor: --list-item;
  position-area: inline-start;
}

위의 예시는 이제 해당 사용 사례가 자동화되므로 수정되어야 합니다.

2.3. 앵커 찾기

이 명세의 여러 항목은 타겟 앵커 요소를 찾습니다. 여기서 앵커 지정자가 주어집니다. 이는 <dashed-ident> (그리고 트리 범위 참조(tree-scoped reference)) 이고, 이는 페이지 내 다른 위치의 anchor-name 값과 일치해야 합니다. 또는 키워드 auto이거나, 또는 아무것도 없을 수 있습니다(지정자가 누락됨).

참고: 이 조건들이 담고 있는 일반 규칙은, 요소가 위치 지정 박스(positioned box)의 타겟 앵커 요소가 되려면, 그 자체의 박스가 참조 대상 위치 지정 박스가 레이아웃 되기 전에 완전히 레이아웃 되어 있어야 한다는 점입니다. CSS의 레이아웃 규칙은 앵커와 위치 지정 박스 간의 관계 및 그들의 포함 블록에 따라 이런 보장을 제공합니다. 아래 조건 목록은 스태킹 컨텍스트 규칙을 바로 이 목적에 맞게 재정의한 것으로, 앵커 포지셔닝에서 순환(circularity)이 불가능하도록 보장합니다.

2.4. 기본 앵커: position-anchor 속성

position-anchor 속성은 기본 앵커 요소(default anchor element)를 지정하며, 이는 position-area, position-try, 및 (기본적으로) 이 요소에 적용된 모든 앵커 함수(anchor functions)에 의해 사용됩니다. position-anchor는 reset-only 하위 속성이며 position 속성의 일부입니다.

normal

position-area가 none이면, none처럼 동작합니다. 그렇지 않으면, auto처럼 동작합니다.

none

이 박스는 기본 앵커 요소(default anchor element)를 가지지 않습니다.

auto

암시적 앵커 요소(implicit anchor element)가 있으면 사용하고, 없으면 이 박스는 기본 앵커 요소(default anchor element)를 가지지 않습니다.

<anchor-name>

지정된 <anchor-name>으로 선택된 타겟 앵커 요소(target anchor element)가 이 박스의 기본 앵커 요소가 됩니다.

기본 앵커 요소(default anchor element)의 주 박스(principal box)가 이 박스의 기본 앵커 박스(default anchor box)가 됩니다.

.anchored {
  position: absolute;
  top: calc(.5em + anchor(outside));
  /* 이름이 지정되지 않은 경우,
     자동으로 기본 앵커 박스를 참조합니다. */
}

.foo.anchored {
  position-anchor: --foo;
}
.bar.anchored {
  position-anchor: --bar;
}

2.4.1. 암시적 앵커 요소

몇몇 명세는 특정 상황에서 특정 요소가 다른 요소의 암시적 앵커 요소임을 정의할 수 있습니다.

TODO: HTML 명세에 popover 관련 세부 사항이 확정되면, 해당 예시로 채우세요.

암시적 앵커 요소는 auto 키워드로 position-anchor에서 참조하거나, 앵커 함수에서 앵커 참조를 생략하여 참조할 수 있습니다.

암시적 앵커 요소는 의사 요소(pseudo-element)의 경우 별도로 명시되지 않는 한, 그 기원 요소(originating element)가 된다.

2.5. 앵커 관련성

요소 el이 사용자에게 관련이 있는지 판단할 때, el의 자손이 위치 지정 박스의 대상 앵커 요소인 경우 (해당 박스 자체는 생략(skipped)되지 않았고, 그 포함 블록이 el 또는 el의 자손이 아닌 경우), el은 사용자에게 관련이 있다고 간주해야 합니다.

참고: 예를 들어, content-visibility: auto 하위 트리에서의 앵커는 그 트리를 사용하는 위치 지정 박스가 skipped되지 않은 한, 콘텐츠 생략이 일어나지 않도록 하게 됩니다. (단, 앵커와 위치 지정 박스 모두 동일한 content-visibility: auto 요소 하위에 있으면 서로 순환적으로 서로를 계속 보이게 하지 않습니다.)

3. 앵커 기반 위치 지정

절대 위치 박스는 페이지 내 여러 앵커 박스를 기준으로 위치를 잡을 수 있습니다.

position-area 속성은 기본 앵커 박스를 기준으로 한 격자(grid) 기반 위치 지정 개념을 쉽게 제공하며, 더 복잡하거나 여러 박스를 기준으로 한 위치 지정에는 anchor() 함수를 inset 속성에서 활용해 특정 앵커 박스의 변(edge)을 명시적으로 참조할 수 있습니다.

3.1. position-area 속성

앵커 위치 지정의 대부분의 일반적인 사용 사례는, 위치 지정된 박스의 포함 블록의 변과 기본 앵커 박스의 변만을 고려합니다. 이러한 선들은 3×3 그리드를 정의하는 것으로 볼 수 있으며, position-area로 이 position-area 그리드의 어떤 영역에 위치시킬지 쉽게 지정할 수 있습니다.

none

이 속성은 아무런 효과가 없습니다.

<position-area>

박스에 기본 앵커 박스가 없거나, 절대 위치 박스가 아닌 경우, 이 값은 효과가 없습니다.

그 외에는, position-area 그리드의 영역을 선택하며, 해당 영역이 이 박스의 포함 블록이 됩니다.

참고: 즉, inset 속성 들은 position-area로부터의 오프셋을 지정하게 되며, max-height: 100%같은 일부 속성 값도 position-area 기준이 됩니다.

none이 아닌 값은 다음 추가 효과를 가집니다:

• 스크롤 가능 포함 블록이 로컬 포함 블록 대신 사용됩니다. absolute-position 포함 블록이 스크롤 컨테이너에 의해 생성될 때 전체 스크롤 가능 오버플로 영역이 (대부분) 위치 지정에 제공되게 됩니다.

• 모든 auto inset 속성 및 auto margin 속성의 사용 값은 0이 됩니다.

• normal 값이 자기 정렬(self-alignment) 속성에서 대응되는 값으로 변환됩니다. § 4.1 영역별 기본 정렬 참고.

3.1.1. Position Area Grid 해석

position-area 그리드는 3×3 그리드이며, 각 축에 4개의 그리드 선이 있습니다. 순서는 (쓰기 모드를 기준으로 포함 블록의):

• 박스의 수정 전 포함 블록의 start 엣지, 또는 기본 앵커 박스의 start 엣지(더 바깥쪽이면)

• 기본 앵커 박스의 start 엣지

• 기본 앵커 박스의 end 엣지

• 박스의 수정 전 포함 블록의 end 엣지, 또는 기본 앵커 박스의 end 엣지(더 바깥쪽이면)

참고: 기본 앵커 박스가 수정 전 포함 블록의 일부 또는 전체 바깥에 있으면, position-area 그리드의 일부 행/열 크기가 0이 될 수 있습니다.

3.1.2. <position-area> 값의 문법

위치는 값 쌍으로 지정하며, 플로우 기준 또는 물리적 용어로 표현할 수 있습니다. <position-area> 값의 허용 문법은 다음과 같습니다:

<position-area> = [
  [ left | center | right | span-left | span-right
  | x-start | x-end | span-x-start | span-x-end
  | self-x-start | self-x-end | span-self-x-start | span-self-x-end
  | span-all ]
  ||
  [ top | center | bottom | span-top | span-bottom
  | y-start | y-end | span-y-start | span-y-end
  | self-y-start | self-y-end | span-self-y-start | span-self-y-end
  | span-all ]
|
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ]
  ||
  [ inline-start | center | inline-end | span-inline-start | span-inline-end
  | span-all ]
|
  [ self-block-start | center | self-block-end | span-self-block-start
  | span-self-block-end | span-all ]
  ||
  [ self-inline-start | center | self-inline-end | span-self-inline-start
  | span-self-inline-end | span-all ]
|
  [ start | center | end | span-start | span-end | span-all ]{1,2}
|
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}
]

<position-area> 값은 position-area 그리드의 영역을 선택하며, 해당 영역이 차지하는 행과 열을 다음과 같이 지정합니다:

start, end, self-start, self-end

top, bottom, left, right

y-start, y-end, self-y-start, self-y-end

x-start, x-end, self-x-start, self-x-end

block-start, block-end, self-block-start, self-block-end

inline-start, inline-end, self-inline-start, self-inline-end

center

해당 축의 단일 행 또는 열.

anchor()와 마찬가지로 일반 논리 키워드(start, end 등)는 박스의 쓰기 모드 기준입니다. x-start 등은 지정된 물리 축 기준으로 방향을 결정합니다.

self-* 논리 키워드는 (self-start, self-x-end 등) 동일하지만 박스의 쓰기 모드 기준입니다.

span-start, span-end, span-self-start, span-self-end

span-top, span-bottom, span-left, span-right

span-y-start, span-y-end, span-self-y-start, span-self-y-end

span-x-start, span-x-end, span-self-x-start, span-self-x-end

span-block-start, span-block-end, span-self-block-start, span-self-block-end

span-inline-start, span-inline-end, span-self-inline-start, span-self-inline-end

해당 축의 인접한 두 행 또는 열. 중심 행/열과 단일 키워드에 해당하는 행/열. (예: span-top은 첫 두 행(중심+top)을 포함.)

span-all

해당 축의 모든 3개 행 또는 열.

일부 키워드는 축이 명확하지 않습니다: center, span-all, start 등 block/inline 축을 명확히 지정하지 않은 키워드. 다른 키워드가 축을 명확히 한다면, 모호한 키워드는 반대 축을 가리킵니다. (예: block-start center에서 center는 inline 축.) 둘 다 모호하면, 첫 번째는 박스의 block 축, 두 번째는 inline 축입니다. (예: span-all start는 span-all inline-start와 동일.)

키워드가 하나면, 해당 축이 명확하면 두 번째 키워드는 span-all로 처리; 그렇지 않으면 키워드를 반복해서 사용한 것과 동일하게 동작합니다. (예: top은 top span-all과 같고, center는 center center와 동일.)

3.1.3. <position-area>의 계산값 및 직렬화

계산값은 <position-area> 값에서 각 축에 대해 선택된 트랙을 나타내는 두 키워드이며, 긴 논리(block-start)와 짧은 논리(start) 키워드는 동등하게 처리합니다. 직렬화는 위 문법 순서대로, 논리 키워드는 짧은 형태로 직렬화됩니다 (예: start start 대신 block-start inline-start 대신).

3.2. 앵커 기준 인셋: anchor() 함수

절대 위치 박스는 anchor() 함수를 인셋 속성 값으로 사용해 하나 이상의 앵커 박스의 위치를 참조할 수 있습니다. anchor() 함수는 <length>로 해석됩니다. 이 함수는 inset 속성에서만 허용되며, 그 외의 경우에는 유효하지 않습니다.

<anchor()> = anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )
<anchor-side> = inside | outside
       | top | left | right | bottom
       | start | end | self-start | self-end
       | <percentage> | center

anchor() 함수는 세 가지 인수를 가집니다:

• <anchor-name> 값은 어떤 방법으로 앵커 요소를 찾아 그 요소로부터 포지셔닝 정보를 받을지 지정합니다. 가능한 값은 다음과 같습니다:

  <dashed-ident>

  찾으려는 앵커 이름(anchor name)을 지정합니다. 이 이름은 트리 범위 참조(tree-scoped reference)입니다.

  생략됨

  박스에 대해 정의된 기본 앵커 요소(default anchor element)를 선택합니다 (가능한 경우).

  자세한 내용은 타겟 앵커 요소(target anchor element)를 참조하세요.

• <anchor-side> 값은 대상 앵커 요소의 해당 변 위치를 참조합니다. 가능한 값은 다음과 같습니다:

  inside

  outside

  앵커 박스의 변 중 하나로 해석되며, 어느 inset 속성에 사용되었는지에 따라 달라집니다. inside는 inset 속성과 같은 방향(변)을 의미하며 (즉, 위치 지정 박스를 앵커 박스의 "안쪽"에 맞춤), outside는 반대쪽을 의미합니다.

  top

  right

  bottom

  left

  앵커 박스의 해당 변을 참조합니다.

  참고: 이 값들은 inset 속성의 동일 축에서만 사용할 수 있습니다. 예를 들어, left는 left, right, 또는 수평 축의 논리 inset 속성에서 사용할 수 있습니다.

  start

  end

  self-start

  self-end

  해당 축에서 앵커 박스의 한 변을 참조하며, 키워드는 쓰기 모드를 기준으로 해석됩니다. (self-start와 self-end는 위치 지정 박스, start, end는 포함 블록의 쓰기 모드 기준)

  <percentage>

  center

  해당 변의 start에서 end까지의 일정 퍼센트 위치를 참조합니다. 0%는 start와 같으며, 100%는 end와 같습니다.

  center는 50%와 같습니다.

• 마지막 선택적 <length-percentage> 인수는 폴백 값으로, 해결 불가 anchor 함수일 때 적용될 값을 지정합니다.

anchor() 함수가 해결 가능한 anchor 함수일 때는 계산값 시점에 (스타일 & 레이아웃 인터리빙 사용) 위치 지정 박스의 <length>로 해석되며, 해당 속성에 맞는 inset-modified 포함 블록의 변과 대상 앵커 요소의 앵커 박스의 지정된 변을 맞추기에 필요한 값을 나타냅니다.

참고: 이것은 트랜지션 또는 애니메이션이 앵커 함수를 사용하는 속성에 적용되는 경우, 다양한 변화에 대해 "기대한 대로" 동작함을 의미합니다: 앵커 박스(anchor box)가 이동하거나, 앵커 요소(anchor elements)가 문서에 추가되거나 삭제되거나, 앵커의 anchor-name 속성이 변경되는 등의 상황에서도 제대로 작동한다는 뜻입니다.

.centered-message {
  position: fixed;
  max-width: max-content;
  justify-self: center;

  --center: anchor(--x 50%);
  --half-distance: min(
    abs(0% - var(--center)),
    abs(100% - var(--center))
  );
  left: calc(var(--center) - var(--half-distance));
  right: calc(var(--center) - var(--half-distance));
  bottom: anchor(--x top);
}

3.2.1. anchor()의 해상도

anchor() 함수는 해결 가능한 anchor 함수 가 되려면 다음 모든 조건을 만족해야 합니다:

• 이 속성은 절대 위치 박스에 적용됩니다.

• 여기서 <anchor-side>가 물리적 키워드를 지정했다면, 해당 축에 적용되는 inset 속성에 지정되어야 합니다. (예를 들어, left는 left나 right 또는 수평축의 논리 inset 속성에만 사용할 수 있습니다.)

• 이 함수가 사용된 박스에 대해 타겟 앵커 요소가 존재해야 하며, 함수에 지정된 <anchor-name> 값이 사용됩니다.

이 중 어느 하나라도 거짓이면, anchor() 함수는 지정된 폴백 값으로 계산됩니다. 폴백 값이 없다면, 이를 참조한 선언은 계산값 시점에서 무효가 됩니다.

3.3. 스크롤 반영

성능 때문에, 구현은 보통 스크롤을 별도의 스크롤/컴포지팅 스레드에서 처리하며, 여기서는 레이아웃 등 무거운 작업이 아니라 단순 이동/변환 등만 처리되어 스크롤 반응이 인간 감각상 '즉각적'으로 느껴질 수 있습니다.

스크롤로 인해 단순히 anchor-positioned 요소가 이동하기만 할 때는 문제 없습니다; 움직임은 스크롤 스레드에서 수행되어 스크롤 콘텐츠와 같이 매끄럽게 움직일 수 있습니다. 하지만 앵커 위치 지정(anchor positioning)은 요소가 자신의 반대쪽 변의 위치를 서로 다른 스크롤 컨텍스트의 요소에 의존하게 할 수 있으므로, 스크롤이 변의 하나만 이동시키고 크기 변화를 유발해 결국 레이아웃이 필요할 수도 있습니다. 이런 경우 스크롤 스레드에서 처리할 수 없습니다!

이를 보완하고 다양한 앵커 지정의 자유도는 최대한 유지하기 위해, 앵커 위치 지정(anchor positioning)은 기억된 스크롤 오프셋과 스크롤 보상 개념을 함께 사용합니다.

위 내용은 위치 지정 요소가 그 앵커 참조(anchor reference) 의 스크롤 위치 변화에 한 번 반응하도록 합니다. 하지만 그들 중 하나가 스크롤되면, 위치 지정 요소는 더 이상 해당 앵커에 고정되어 보이지 않게 됩니다 (비록 스크롤 이외의 위치 이동에는 계속 반응함). 이 문제는 일반적으로 완벽히 해결할 수 없지만, 하나의 앵커 참조에 대한 스크롤에는 대응할 수 있습니다; 즉, 기본 앵커 요소에 한정하여 지원합니다:

4. 앵커 기반 정렬

4.1. 영역별 기본 정렬

position-area가 none이 아닌 경우, 사용 값이 normal인 self-alignment는 <position-area> 값에 따라 달라지며, 박스가 앵커 쪽으로 정렬되도록 변경됩니다:

• 한 축에서 center 트랙만 선택된 경우, 해당 축의 기본 정렬은 center입니다.

• 세 트랙 모두 선택된 경우, 해당 축의 기본 정렬은 anchor-center입니다.

• 그 외의 경우, 해당 축의 기본 정렬은 명시되지 않은 쪽 트랙 방향으로 됩니다: 만약 축의 “start” 트랙만 명시된 경우, 기본 정렬은 end 등입니다.

하지만 관련 축의 inset 속성 중 하나만 auto이면, 기본 정렬은 auto가 아닌 인셋 쪽 변으로 향하고, 이 정렬은 unsafe 정렬입니다.

Note: 이 단일 auto 동작은 한 인셋값으로 절대 위치 박스의 위치를 제어하던 기존 방식과 호환됩니다.

4.2. 앵커에 중앙 정렬: anchor-center 정렬 값

self-alignment 속성은 절대 위치 박스가 inset-modified 포함 블록 내에서 스스로 정렬하게 해줍니다. 기존 값들과 적절한 inset 속성 조합만으로도 대부분의 정렬에는 충분하지만, 앵커 위치 지정에서 자주 쓰이는 "앵커 위에 중앙 정렬"은 복잡한 스타일 설정이 필요했습니다.

새로운 anchor-center 값은 이 경우를 아주 간단하게 만듭니다: 위치 지정 박스에 기본 앵커 박스가 있으면, 해당 축에서 (가능한 한) 기본 앵커 박스 위에 중앙 정렬됩니다. 추가적으로 다음 효과가 있습니다:

• 해당되는 경우 스크롤 가능 포함 블록이, 로컬 포함 블록 대신 사용되어 전체 스크롤 가능 오버플로 영역이 위치 지정에 활용될 수 있습니다.

• 해당 축의 사용 값이 auto인 inset 속성ㆍauto margin 속성의 값은 0이 됩니다.

박스가 절대 위치가 아니거나, 기본 앵커 박스가 없으면, 이 값은 center처럼 동작하며, inset 속성 해석에는 추가 효과가 없습니다.

Note: anchor-center 사용 시 앵커가 박스의 원래 포함 블록 변에 너무 가까우면, 박스가 원래 포함 블록 내에 있도록 가운데 정렬에서 "이동"됩니다. 자세한 내용은 CSS Box Alignment 3 § 4.4 Overflow Alignment: the safe and unsafe keywords and scroll safety limits를 참고하세요.

5. 앵커 기반 크기 조정

절대 위치 박스는 anchor-size() 함수를 크기 속성(sizing properties)에 사용해, 하나 이상의 앵커 박스의 크기를 참조할 수 있습니다. anchor-size() 함수는 <length>로 해석됩니다. 이 함수는 허용된 @position-try 속성에서만 허용되며, 그 외에는 유효하지 않습니다.

5.1. anchor-size() 함수

anchor-size() = anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-size> = width | height | block | inline | self-block | self-inline

anchor-size() 함수는 anchor()와 유사하며, 인수도 동일하나 <anchor-side> 키워드 대신 <anchor-size> 키워드를 사용하여, 대향하는 두 변 사이의 거리를 참조합니다.

물리적 <anchor-size> 키워드 (width 및 height) 는 각각 대상 앵커 요소의 너비/높이를 의미합니다. anchor()와는 달리 축 일치 제한이 없습니다. 예를 들어 width: anchor-size(--foo height); 도 유효합니다.

논리 <anchor-size> 키워드 (block, inline, self-block, self-inline) 는 각 키워드마다 박스 (self-block, self-inline: 해당 박스의 writing mode) 또는 포함 블록(block, inline: 포함 블록의 writing mode) 의 writing mode에 따라 물리적 키워드로 매핑됩니다.

<anchor-size> 키워드가 생략되면, anchor-size()가 사용된 속성의 축에 맞는 키워드로 동작합니다. (예: width: anchor-size()는 width: anchor-size(width)와 동일합니다.)

anchor-size() 함수가 해결 가능한 anchor-size 함수라면, 계산값 시점에 (스타일 및 레이아웃 인터리빙으로) <length>로 해석되며, 이 값은 대상 앵커 요소 앵커 박스의 해당 변 (좌/우 또는 상/하) 사이 거리입니다.

5.1.1. anchor-size()의 해상도

anchor-size() 함수는 해결 가능한 anchor-size 함수가 되려면 다음 조건을 모두 만족해야 합니다:

• 절대 위치 박스에 적용되어야 합니다.

• 함수가 사용된 박스와 함수에 명시된 <anchor-name>에 대해 대상 앵커 요소가 존재해야 합니다.

이 조건 중 하나라도 거짓이면, anchor-size() 함수는 지정된 폴백 값으로 해석됩니다. 폴백 값이 없는 경우, 이를 참조한 선언은 계산값 단계에서 무효가 됩니다.

6. 오버플로우 관리

앵커 위치 지정(anchor positioning)은 강력하지만 예측 불가할 수도 있습니다. 앵커 박스는 페이지 어디에도 위치할 수 있으므로, (예: 앵커 위/오른쪽 등) 특정 방식으로 박스를 위치시키면 위치 지정 박스가 포함 블록을 넘치거나 화면 밖에 일부 배치될 수 있습니다.

이를 완화하기 위해 절대 위치 박스는 position-try-fallbacks 속성을 사용해 (기존 스타일에서 생성된 또는 @position-try 규칙에서 명시된) UA가 위치 지정 후 박스가 넘치면 시도해볼 추가 위치 옵션을 지정할 수 있습니다. 각 옵션은 position-try-order에서 지정된 순서대로 박스에 하나씩 적용되고, 포함 블록을 넘치지 않는 첫 옵션이 채택됩니다.

일단 하나의 옵션이 선택되면, 그 옵션의 스타일은 요소가 다시 오버플로우할 때까지 유지됩니다. 더 이른(그리고 일반적으로 더 적합한) 옵션이 오버플로우 없이 다시 사용 가능해지더라도 마찬가지입니다. (마지막으로 성공한 위치 옵션 기록 참고.)

#myPopover {
  position: fixed;
  position-anchor: --button;
  position-area: bottom span-x-end;
  position-try-fallbacks: flip-x, flip-y, flip-x flip-y, bottom, top;

  /* 팝오버는 버튼만큼 최소한 넓습니다 */
  min-width: anchor-size(width);

  /* 팝오버는 메뉴 항목 2개만큼은 최소한 높습니다 */
  min-height: 6em;
}

6.1. 대체 옵션 제공: position-try-fallbacks 속성

이 속성은 절대 위치 박스가 inset-modified 포함 블록을 넘칠 때 시도할 대체 위치 스타일 목록을 제공합니다. 이 위치 옵션 리스트(position options list)는 처음에는 요소의 폴백 기본 스타일 즉, computed styles에서 position-try-fallbacks 미적용 상태로 생성된 위치 옵션(position option) 하나만 포함합니다.

리스트의 각 쉼표 단위 항목은 별도의 옵션입니다. @position-try 블록의 이름이거나, 해당 박스의 기존 computed style을 자동 변환하는 <try-tactic>입니다.

값의 의미는 다음과 같습니다:

none

이 속성은 아무런 효과가 없습니다. 박스의 위치 옵션 리스트는 비어 있습니다.

<dashed-ident>

해당 이름의 @position-try 규칙이 있다면, 그 위치 옵션을 위치 옵션 리스트에 추가합니다.

그 외에는 효과가 없습니다.

<try-tactic>

지정된 try-tactic을 실행하여 박스의 기본 스타일을 자동 변환한 결과로 위치 옵션을 생성하고, 해당 위치 옵션을 위치 옵션 리스트에 추가합니다.

<try-tactic> = flip-block || flip-inline || flip-start || flip-x || flip-y

flip-block

블록 축(block axis)의 값을 교체합니다 (예: margin-block-start와 margin-block-end 사이), 본질적으로 인라인 축 기준 선을 따라 미러링합니다.

flip-inline

인라인 축의 값을 교체하며, 이는 블록 축 기준 선을 따라 미러링 한 것과 같습니다.

flip-x

수평 축의 값을 교체합니다 (예: margin-left와 margin-right 사이), 본질적으로 수직 축 기준 선을 따라 미러링합니다.

flip-y

수직 축의 값을 교체하며, 수평 축 기준 선을 따라 미러링 한 것과 같습니다.

flip-start

start 속성들끼리, end 속성들끼리 값을 교체합니다 (예: margin-block-start와 margin-inline-start 등), 본질적으로 block-start-inline-start 코너에서 block-end-inline-end 코너까지 대각선 기준 미러링입니다.

키워드를 여러 개 지정한 경우, 변환들을 순서대로 합성해 하나의 위치 옵션을 만듭니다. 논리 방향은 writing mode에 따라 포함 블록 기준으로 해석합니다.

<dashed-ident> || <try-tactic>

이전 두 옵션의 효과를 결합합니다: 해당 이름의 @position-try 규칙이 있으면, 그 위치 옵션을 base 스타일에 적용한 뒤, 지정한 <try-tactic>대로 변환하여 결과를 박스의 위치 옵션 리스트에 추가합니다.

없으면 효과 없음.

<position-area>

해당 값의 position-area 속성만으로 구성된 위치 옵션을 자동 생성합니다.

6.2. 폴백 순서 결정: position-try-order 속성

이 속성은 요소가 위치 옵션별로 사용할 수 있는 공간이 더 중요하다면, position-try-fallbacks에 선언된 순서 대신, 각 위치 옵션이 정의하는 가용 공간 크기로 정렬할 수 있게 합니다.

<try-size> = most-width | most-height | most-block-size | most-inline-size

normal

position-try-fallbacks에 지정한 순서대로 위치 옵션을 시도합니다.

most-width

most-height

most-block-size

most-inline-size

위치 옵션 리스트의 각 항목에 대해, 해당 위치 옵션을 적용한 후, 그 스타일로 인한 inset-modified 포함 블록의 크기를 구해서 (auto 인셋 값은 0으로 간주함) 이 크기에 따라 위치 옵션 리스트를 가장 큰 것이 먼저 오도록 안정 정렬(stable sort)합니다.

논리 방향 해석은 writing mode에 따라 포함 블록 기준으로 합니다.

.anchor { anchor-name: --foo; }
.list {
  position: fixed;
  position-anchor: --foo;
  position-area: block-end span-inline-end;
  position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
  position-try-order: most-height;
}
@position-try --bottom-scrollable {
  align-self: stretch;
}
@position-try --top-scrollable {
  position-area: block-start span-inline-end;
  align-self: stretch;
}

6.3. position-try 축약 속성

이 축약 속성은 position-try-fallbacks와 position-try-order를 모두 설정합니다. <'position-try-order'>가 생략되면, 해당 속성의 초깃값이 사용됩니다.

6.4. @position-try 규칙

@position-try 규칙은 특정 이름의 위치 옵션을 정의하며, 여러 개의 위치 지정 속성 집합을 지정하여 position-try-fallbacks를 통해 박스에 적용할 수 있습니다.

@position-try 규칙의 문법은 다음과 같습니다:

@position-try <dashed-ident> {
  <declaration-list>
}

전주에 명시된 <dashed-ident>가 규칙의 이름입니다. 같은 이름으로 @position-try 규칙이 여러 개 선언된 경우, @keyframe 규칙과 동일하게 카스케이드(cascade)됩니다.

@position-try 규칙에서는 다음 속성만 허용됩니다:

• inset 속성

• margin 속성

• 크기 속성(sizing properties)

• self-alignment 속성

• position-anchor

• position-area

<declaration-list> 내 속성에 !important를 사용하면 해당 속성은 무효가 되지만, @property-try 규칙 전체가 무효가 되진 않습니다.

@position-try 내 모든 속성은 위치 폴백 오리진(Position Fallback Origin)의 일부로 박스에 적용되며, 이 오리진은 Author Origin 과 Animation Origin 사이에 위치하는 새로운 카스케이드 오리진(cascade origin)입니다.

Animation Origin과 마찬가지로 revert 값을 사용하면, 해당 속성이 Author Origin의 일부였던 것처럼 동작하여, 대신 User Origin으로 되돌아갑니다. (단, Animation Origin처럼, revert-layer는 특별한 동작 없이 명시된 대로 동작합니다.)

참고: 허용되는 @position-try 속성들은 박스 자기 자신의 크기와 위치에만 영향을 미치며, 내용물이나 스타일에는 영향을 주지 않는 최소 범위의 속성입니다. 이로써 위치 폴백 구현을 단순화하면서도 공간에 따른 앵커 위치 지정 박스 이동이라는 본질적 과제를 해결할 수 있게 됩니다. 이런 규칙들은 Author Origin의 선언을 덮어쓰기 때문에 @position-try 선언과 다른 속성의 일반적인 상속·카스케이드 충돌을 방지합니다. 향후 컨테이너 쿼리(container query) 등 확장에서 요소의 위치 폴백별 조건부 스타일링 지원이 기대됩니다. (현 제한적 속성 리스트로는 불가)

참고: 여러 요소가 같은 @position-try 규칙을 쓰고자 할 때, 각자 자신의 앵커 요소를 기준으로 쓰려면 <anchor-name>을 anchor()에 명시하지 말고, 각 박스의 position-anchor에서 각자 지정하세요.

참고: 가장 일반적인 폴백 위치 지정(기본적으로 한쪽, 넘치면 반대로 "플립")은 position-try-fallbacks의 키워드만으로도 쓸 수 있고, @position-try는 필요 없습니다.

6.5. 위치 폴백 적용

위치 지정 박스가 (기본 스크롤 시프트를 적용한 후) inset-modified 포함 블록을 넘치고, 위치 옵션 리스트에 두 개 이상 위치 옵션이 있을 경우, 위치 폴백 스타일 결정을 실행해 넘침 없는 옵션을 찾으려고 시도합니다. 적용 결과 스타일은 스타일·레이아웃 인터리빙으로 요소에 적용돼 계산값에도 반영되므로(트랜지션 등 발생 가능) 레이아웃·사용값에 의존해도 처리됩니다.

구현체는 과도한 레이아웃 비용 제한을 위해 위치 옵션 리스트 길이에 임의로 제한을 둘 수 있습니다. 단, 이 제한은 최소 다섯 이상이어야 합니다.

전체 레이아웃 단계 중 한 박스가 폴백 스타일을 결정하고(혹은 폴백 없음으로 결정하고) 나면, 이후 레이아웃되는 요소가 이 결정을 바꿀 수 없습니다.

6.5.1. 폴백 선택 유지 및 해제

박스에 대한 특정 변경은 위치 폴백 스타일 재결정에 직결적 영향을 주며, 특수 동작을 유발합니다. 이런 폴백 민감 변경(fallback-sensitive changes)은 아래와 같습니다:

• 계산된 position 값이 바뀌거나, 포함 블록 연결이 바뀌거나, box가 더 이상 생성되지 않는 경우

• position-try의 longhand 중 계산값이 바뀐 경우

• 허용된 @position-try 속성의 계산값이 바뀐 경우

• 참조된 @position-try 규칙이 추가/제거/변경된 경우

이 목적을 위해서는 계산된 기본 스타일의 변화만 고려한다. 즉, 트렌지션 또는 애니메이션 cascade origin에서 유래한 선언은 무시한 계산된 스타일 기준이다.

6.5.1.1. 마지막으로 성공한 위치 옵션 기록

레이아웃의 안정성을 최대한 유지하기 위해, 위치 폴백 스타일 결정은 마지막으로 성공한 위치 옵션을 우선시한다. 이 값은 다음과 같이 결정된다:

6.5.2. 위치 옵션 적용

6.6. 조건부 숨김: position-visibility 속성

일부 조건에서는 절대 위치 박스를 표시하는 것이 의미 없을 수 있습니다. 이 속성을 이용하면 이런 박스의 표시 여부를 자주 필요한 레이아웃 조건에 따라 조건부로 제어할 수 있습니다.

always

이 속성은 아무 효과가 없습니다. (앵커나 오버플로우 여부 상관없이 박스가 표시됩니다.)

anchors-valid

박스의 필수 앵커 참조 중 하나라도 대상 앵커 요소로 해석되지 않으면, 박스의 visibility 속성은 force-hidden으로 계산됩니다.

필수 앵커 참조란? 폴백 값 없는 anchor() 함수; 기본 앵커는 경우에 따라? 추가 설명 필요.

하나라도 앵커가 없으면? 모두 없으면? 두 케이스 모두 활용 예 있음. 고정인지 선택 가능하게 할지 결정해야 함.

anchors-visible

박스에 기본 앵커 박스가 있지만, 해당 앵커 박스가 보이지 않거나 중간 박스에 의해 클리핑된 경우에는, 박스의 visibility 속성은 force-hidden으로 계산됩니다.

no-overflow

박스가 inset-modified 포함 블록을 position-try 적용 후에도 넘치면, 박스의 visibility 속성은 force-hidden으로 계산됩니다.

7. 접근성 영향

CSS 앵커 위치 지정은 요소 간의 접근성 바인딩을 생성, 삭제 또는 변경하지 않습니다. 작성자는 이러한 바인딩을 별도의 마크업 기능으로 반드시 직접 제어해야 합니다.

이 기능은 여러 용도로 다양하게 사용될 수 있으므로, CSS 앵커 위치 지정이 위치 지정 박스와 앵커 간에 어떤 의미론적(semantic) 관계도 자동으로 설정하지 않습니다. 예를 들어, 디자인상 시각적 앵커링 관계가 요소와 의미론적 앵커일 수도 있고, 원하는 시각 효과에 따라 요소가 의미 앵커의 상위/형제/자식일 수 있습니다. 또는 의미 관계는 있으면서 시각적 앵커링은 피할 수도, 그 반대일 수도 있습니다.

작성자는 CSS 위치 지정에서 암시되는 시각적 관계에만 의존해 요소끼리 의미 연결이 있다고 간주해서는 안 됩니다. 올바른 마크업 없이는, 시각적으로 연결된 요소가 아무런 DOM 구조상 의미 관계도 없게 되고—​심지어 의미 관계가 있다 해도 비시각적 에이전트(스크린리더 등)ㆍ비그래픽 탐색(탭 이동 등)에서는 사용이 어렵거나 불가능할 수 있습니다.

웹 플랫폼 내 여러 기능(기존, 추가 예정 양쪽 모두)은 시맨틱 연결을 명시적으로 제공할 수 있으므로, 비시각적 사용자 에이전트도 혜택을 받을 수 있습니다. 예를 들어 HTML의 Popover API는 연동 버튼을 팝오버 요소에 자동 연결해주고, 탭 순서까지 자동 조정됩니다. 이 때 팝오버 API는 연동 버튼을 팝오버의 암시적 앵커 요소로 만들어, 앵커 위치 지정의 활용도 쉽게 할 수 있습니다.

popover 예제 추가 필요.

일반적으로는, aria-details 또는 aria-describedby 같은 ARIA 속성을 앵커 요소에 지정하고, 해당 위치 지정 요소에는 role 속성을 지정해 요소 간 의미적 연결을 어느 정도 수작업으로 할 수 있습니다. 이렇게 하면 비시각적 사용자 에이전트가 요소 관계를 사용자에게 설명하거나 자동 탐색을 지원할 수 있습니다.

하지만 이런 기능도 과다하게 남용하면 불필요한 의미적 연결이 너무 많아져 오히려 페이지 이해를 어렵게 만들 수 있으니 주의해야 합니다.

본 섹션에서 저자 안내·모범 사례 예시 등 개선 제안은 환영합니다. [이슈 #10311]

8. DOM 인터페이스

8.1. CSSPositionTryRule 인터페이스

CSSPositionTryRule 인터페이스는 @position-try 규칙을 나타냅니다:

[Exposed=Window]
interface CSSPositionTryRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSPositionTryDescriptors style;
};

[Exposed=Window]
interface CSSPositionTryDescriptors : CSSStyleDeclaration {
  attribute CSSOMString margin;
  attribute CSSOMString marginTop;
  attribute CSSOMString marginRight;
  attribute CSSOMString marginBottom;
  attribute CSSOMString marginLeft;
  attribute CSSOMString marginBlock;
  attribute CSSOMString marginBlockStart;
  attribute CSSOMString marginBlockEnd;
  attribute CSSOMString marginInline;
  attribute CSSOMString marginInlineStart;
  attribute CSSOMString marginInlineEnd;
  attribute CSSOMString margin-top;
  attribute CSSOMString margin-right;
  attribute CSSOMString margin-bottom;
  attribute CSSOMString margin-left;
  attribute CSSOMString margin-block;
  attribute CSSOMString margin-block-start;
  attribute CSSOMString margin-block-end;
  attribute CSSOMString margin-inline;
  attribute CSSOMString margin-inline-start;
  attribute CSSOMString margin-inline-end;
  attribute CSSOMString inset;
  attribute CSSOMString insetBlock;
  attribute CSSOMString insetBlockStart;
  attribute CSSOMString insetBlockEnd;
  attribute CSSOMString insetInline;
  attribute CSSOMString insetInlineStart;
  attribute CSSOMString insetInlineEnd;
  attribute CSSOMString top;
  attribute CSSOMString left;
  attribute CSSOMString right;
  attribute CSSOMString bottom;
  attribute CSSOMString inset-block;
  attribute CSSOMString inset-block-start;
  attribute CSSOMString inset-block-end;
  attribute CSSOMString inset-inline;
  attribute CSSOMString inset-inline-start;
  attribute CSSOMString inset-inline-end;
  attribute CSSOMString width;
  attribute CSSOMString minWidth;
  attribute CSSOMString maxWidth;
  attribute CSSOMString height;
  attribute CSSOMString minHeight;
  attribute CSSOMString maxHeight;
  attribute CSSOMString blockSize;
  attribute CSSOMString minBlockSize;
  attribute CSSOMString maxBlockSize;
  attribute CSSOMString inlineSize;
  attribute CSSOMString minInlineSize;
  attribute CSSOMString maxInlineSize;
  attribute CSSOMString min-width;
  attribute CSSOMString max-width;
  attribute CSSOMString min-height;
  attribute CSSOMString max-height;
  attribute CSSOMString block-size;
  attribute CSSOMString min-block-size;
  attribute CSSOMString max-block-size;
  attribute CSSOMString inline-size;
  attribute CSSOMString min-inline-size;
  attribute CSSOMString max-inline-size;
  attribute CSSOMString placeSelf;
  attribute CSSOMString alignSelf;
  attribute CSSOMString justifySelf;
  attribute CSSOMString place-self;
  attribute CSSOMString align-self;
  attribute CSSOMString justify-self;
  attribute CSSOMString positionAnchor;
  attribute CSSOMString position-anchor;
  attribute CSSOMString positionArea;
  attribute CSSOMString position-area;
};

name 속성은 규칙 서문에서 선언된 이름을 나타냅니다.

style 속성은 규칙 본문에서 선언된 속성들을 지정된 순서대로 나타냅니다. 값을 얻을 때, CSSPositionTryDescriptors 객체를 반환해야 하며, @position-try at-rule에 대해 다음과 같은 속성을 포함합니다:

computed flag

설정되지 않음

readonly flag

설정되지 않음

declarations

규칙에서 선언된 descriptor들이 지정된 순서대로 포함됩니다.

parent CSS rule

컨텍스트 객체

owner node

Null

9. 부록: 스타일 & 레이아웃 인터리빙

스타일 & 레이아웃 인터리빙은 스타일 업데이트가 레이아웃 과정 중 서브트리에 발생하여, 요소의 계산된 스타일을 소급해 갱신하는 기법입니다.

이 개념은 여기에 맞는 명세가 아니며, 아마 Cascade에 들어가야 하지만, 참고용 개요가 필요해 여기에 둡니다.

참고: 스타일 & 레이아웃 인터리빙은 이미 컨테이너 쿼리와 컨테이너 쿼리 길이에도 사용됩니다. 10cqw와 같은 길이는 쿼리 컨테이너의 크기 레이아웃 정보를 이용해 계산된 길이로 해석되며, 컨테이너 크기가 레이아웃마다 바뀌면 트랜지션도 트리거될 수 있습니다.

허용된 @position-try 속성도 대체 해석 시 인터리빙됩니다 (position-try 참고).

당연히 훨씬 더 많은 세부 내용이 필요하지만, "컨테이너 쿼리에서 하는 대로 동작" 정도면 충분합니다. 그 동작도 정의되어 있진 않지만, 적어도 어느 정도 상호운용성이 있습니다.

10. 보안 고려사항

이 문서에 대해 보고된 보안 이슈는 없습니다.

11. 프라이버시 고려사항

이 문서에 대해 보고된 프라이버시 이슈는 없습니다.

12. 변경 사항

2025년 12월 22일 워킹 드래프트(22 December 2025 Working Draft) 이후의 주요 변경 사항:

• 포지션 폴백(position fallback)이 트랜지션 및 애니메이션과 어떻게 상호작용하는지 명확하게 기술함. (이슈 13048)

• 앵커 박스가 0이 아닌 경우, anchors-visible 에 대해 교집합이 0이 아니어야 함을 명확히 함. (이슈 13176)

• 앵커 탐색(anchor-finding) 시 조상부터 우선 검색하고, 실패할 경우에만 다른 요소를 찾도록 변경. 이것이 타임라인 이름 조회와 더 일관성 있게 됨. (이슈 13364)

2025년 10월 7일 워킹드래프트 이후의 주요 변경 사항:

• flip-x와 flip-y가 position-try-fallbacks에 추가됨. (이슈 12869)

• anchor-center가 scrollable containing block도 사용하는 것으로 정의됨, 이로써 local containing block 밖에 위치할 때 오버플로우 정렬을 유발하지 않음. (이슈 12952)

• position-area 또는 anchor-center가 적용될 때 auto 마진을 0으로 해석하도록 함, 팝오버용 HTML UA 기본 스타일시트 규칙에 의한 문제 때문. dialog 정렬 값(이전 대책)은 삭제됨. (이슈 10258)

• none 값을 position-anchor에 추가, 이 값을 초기값으로 하여 암시적 앵커 요소가 있는 모든 절대 위치 박스가 scrollable containing block을 쓰지 않도록 함. 초기값은 논의 중이라 앞으로 또 바뀔 수 있음... (이슈 13067)

• flip-block, flip-inline, flip-start는 writing mode가 containing block 기준임을 명확화. (이슈 12869, 이슈 13076)

• auto inset 값은, inset-modified 포함 블록 크기 계산시 0으로 처리, position option을 position-try-order로 비교할 때 적용함을 명확화. (이슈 12942)

• clip-path도 anchors-visible 체크대상에 포함, 체크 시점에 대해서도 명확하게 함. (이슈 12732)

• 기본 스타일이 position options list에 빠지는 오류 수정. (이슈 12890)

• anchors-visible 체크의 타이밍 명확화. (이슈 12732)

• normal 정렬 해석이 position-area 값에 따라 사용 값에 직접 영향을 주며, 이 사용 값이 오버플로우 처리 방식에 연동됨을 명확히 함 ([CSS-ALIGN-3]).

• 앵커 이름 매칭시 트리 루트 일치가 필요하던 알고리즘 오류 수정, 섀도우 트리 경계 너머로 매칭될 수도 있음을 반영. (이슈 12941)

• auto inset 값은 inset-modified 포함 블록 크기를 position-try-order에서 계산할 때 0으로 처리함을 명확화. (이슈 12942)

• § 6 Overflow Management와 § 2 Determining the Anchor 설명 구조 재편. (이슈 12818, 이슈 11022)

• § 7 접근성 영향의 가이드 보완, UA 요구사항 명확화. (이슈 10311)

• 예시 개선.

이전 변경 내역은 Previous Changes 참고.