CSS 위치 지정 레이아웃 모듈 레벨 4

::backdrop {
  position: fixed;
  inset: 0;
}

요소 el이 최상위 레이어에 있다는 것은 el이 자신의 node document의 노드 문서의 최상위 레이어에 포함되어 있지만, 아닌 경우 자신의 노드 문서의 최상위 레이어 삭제 예정 목록에는 포함되어 있지 않은 경우입니다.

참고: 명세에서는 최상위 레이어에서 렌더링됨을 사용하는 대신 이 개념을 사용해야 합니다. 이 개념을 사용하면 overlay 전환이 있는지, 또는 두 동작이 렌더링 업데이트 사이에 발생하는지 이후에 발생하는지에 따라 동작이 달라지는 것을 방지할 수 있습니다.

요소 el이 최상위 레이어에서 렌더링됨이라는 것은 el이 자신의 노드 문서의 최상위 레이어에 포함되어 있으면서, el의 overlay: auto가 적용된 경우입니다.

참고: 명세에서는 최상위 레이어에 있다가 아닌 이 개념을 사용해야 하며, 최상위 레이어 자체를 조작하는 것이 아니라, "모든 것 위에" 렌더링되는 동작에 응답하는 경우에 사용합니다. 예를 들어, ::backdrop 의사 요소의 존재는 해당 요소가 최상위 레이어에서 렌더링되고 있어야 하며, 요소가 삭제 예정이어도, "모든 것 위에" 표시되는 한 ::backdrop을 가집니다.

요소를 최상위 레이어에 추가한다는 것은, Element el이 주어졌을 때 다음과 같이 동작합니다:

1. doc를 el의 노드 문서로 설정한다.

2. el이 이미 포함되어 있다면 doc의 최상위 레이어에:

   • 단언: el은 doc의 최상위 레이어 삭제 예정 목록에도 포함되어 있어야 한다. (그렇지 않으면 명세 오류임.)

   • 제거 el을 doc의 최상위 레이어와 최상위 레이어 삭제 예정 목록 모두에서 제거한다.

3. 추가 el을 doc의 최상위 레이어에 추가한다.

4. UA !important cascade origin에서, el을 대상으로 하는 overlay: auto 선언이 포함된 규칙을 추가한다.

요소의 최상위 레이어 삭제 요청은, Element el이 주어졌을 때 다음과 같이 동작합니다:

1. doc를 el의 노드 문서로 설정한다.

2. el이 포함되어 있지 않거나 doc의 최상위 레이어에, 혹은 el이 이미 포함되어 있다면 doc의 최상위 레이어 삭제 예정 목록에, return.

3. UA !important overlay: auto 규칙을 el에 대해 제거한다.

4. 추가 el을 doc의 최상위 레이어 삭제 예정 목록에 추가한다.

즉시 최상위 레이어에서 요소 제거는, Element el이 주어졌을 때 다음과 같이 동작합니다:

1. doc를 el의 노드 문서로 설정한다.

2. 제거 el을 doc의 최상위 레이어와 최상위 레이어 삭제 예정 목록에서 제거한다.

3. UA !important overlay: auto 규칙을 el에 대해 제거한다(존재할 경우).

참고: 이 알고리즘은 overlay 전환 등 즉시 최상위 레이어에서 제거해야 하는 특수한 경우에만 사용됩니다. 대부분의 경우에는 최상위 레이어 삭제 요청을 사용하는 것이 더 적합합니다.

최상위 레이어 삭제 처리는, Document doc이 주어졌을 때 다음과 같이 동작합니다:

1. doc의 최상위 레이어 삭제 예정 목록에 있는 각 el에 대해: el의 overlay 계산값이 none이거나, el이 렌더링되지 않은 경우, 즉시 최상위 레이어에서 제거 el을 수행한다.

참고: 이 알고리즘은 HTML 렌더링 알고리즘의 "렌더링 업데이트" 단계에서 호출되는 것을 목적으로 합니다. 다른 알고리즘에서 호출되는 것은 의도되지 않았습니다.

참고: overlay 검사는 저자 수준의 전환에 의해 임의로 지연될 수 있습니다. 자세한 내용은 § 3.4 최상위 레이어 제어: overlay 속성을 참고하세요.

* { overlay: none !important; }

             |     |         |
             |          |    |   ⇦ 🧑‍🎨
             |          |        user
z-index:  canvas  -1    0    1

문서 페인팅을 하려면, 문서 doc과 무한 캔버스 canvas가 주어졌을 때:

1. 스태킹 컨텍스트 페인팅을 doc의 루트 요소와 canvas에 대해 수행한다.

2. doc의 최상위 레이어에 있는 각 요소 el에 대해:

   1. 스태킹 컨텍스트 페인팅을 el의 ::backdrop 의사 요소와 canvas에 대해 수행한다.

   2. 스태킹 컨텍스트 페인팅을 el과 canvas에 대해 수행한다. el을 스태킹 컨텍스트로 취급하며, 초기 포함 블록을 포함 블록으로 사용한다.

스태킹 컨텍스트 페인팅을 하려면, 요소, 의사 요소, 또는 박스 root와 무한 캔버스 canvas가 주어졌을 때:

1. root가 요소라면, 스태킹 컨텍스트 페인팅을 root의 주 박스와 canvas에 대해 수행하고, return.

2. 단언: root는 박스이며, 스태킹 컨텍스트를 생성한다.

3. root가 루트 요소의 주 박스라면, root의 배경을 canvas 전체에 페인팅한다. 배경 위치 영역의 원점은 root의 배경이 일반적으로 페인팅되는 위치를 canvas에서 사용한다.

4. root가 블록 레벨 박스라면, 블록의 장식 페인팅을 root, canvas에 대해 수행한다.

5. root의 위치 지정된 후손 중 음수(0이 아님) z-index 값을 가진 후손에 대해, 해당 후손들을 z-index 순서(가장 음수부터) 그 다음 트리 순서로 정렬한 후, 각 후손과 canvas에 대해 스태킹 컨텍스트 페인팅을 수행한다.

6. root의 in-flow, 위치 지정되지 않은, 블록 레벨 후손에 대해, 트리 순서로, 해당 후손과 canvas에 대해 블록의 장식 페인팅을 수행한다.

7. root의 위치 지정되지 않은 부동 후손에 대해, 트리 순서로, 해당 후손과 canvas에 대해 스태킹 컨테이너 페인팅을 수행한다.

8. root가 인라인 레벨 박스라면

   root가 속한 각 라인 박스에 대해, 라인 박스 내 박스 페인팅을 root, 라인 박스, canvas에 대해 수행한다.

   그 외

   먼저 root에 대해, 그 다음 모든 in-flow, 위치 지정되지 않은, 블록 레벨 후손 박스에 대해, 트리 순서로:

   1. 박스가 치환 요소라면, 치환된 콘텐츠를 canvas에 원자적으로 페인팅한다.

   2. 그 외, 박스의 각 라인 박스에 대해, 라인 박스 내 박스 페인팅을 박스, 라인 박스, canvas에 대해 수행한다.

   3. UA가 인밴드 윤곽선을 사용한다면, 박스의 윤곽선을 canvas에 페인팅한다.

9. root의 위치 지정된 후손 중 z-index: auto 또는 z-index: 0 값을 가진 후손에 대해, 트리 순서로:

   후손이 z-index: auto인 경우

   스태킹 컨테이너 페인팅을 해당 후손과 canvas에 대해 수행한다.

   후손이 z-index: 0인 경우

   스태킹 컨텍스트 페인팅을 해당 후손과 canvas에 대해 수행한다.

10. root의 위치 지정된 후손 중 양수(0이 아님) z-index 값을 가진 후손에 대해, 해당 후손들을 z-index 순서(가장 작은 것부터) 그 다음 트리 순서로 정렬한 후, 각 후손과 canvas에 대해 스태킹 컨텍스트 페인팅을 수행한다.

11. UA가 아웃오브밴드 윤곽선을 사용한다면, root의 모든 윤곽선을 그린다 (이번 알고리즘 호출에서 인밴드 윤곽선 사용으로 인해 그리지 않은 윤곽선) canvas에 페인팅한다.

블록의 장식 페인팅을 하려면, 블록 박스 root와 캔버스 canvas가 주어졌을 때:

1. root가 테이블 래퍼 박스가 아니라면:

   1. root가 루트 요소의 주 박스가 아닐 때, root의 배경을 canvas에 페인팅한다.

   2. root의 테두리를 canvas에 페인팅한다.

2. root가 테이블 래퍼 박스인 경우:

   1. root가 루트 요소의 주 박스가 아닐 때, root의 배경을 canvas에 페인팅한다.

   2. root의 각 컬럼 그룹에 대해 트리 순서로, 컬럼 그룹의 배경을 canvas에 페인팅한다.

   3. root의 각 컬럼에 대해 트리 순서로, 컬럼의 배경을 canvas에 페인팅한다.

   4. root의 각 행 그룹에 대해 트리 순서로, 행 그룹의 배경을 canvas에 페인팅한다.

   5. root의 각 행에 대해 트리 순서로, 행의 배경을 canvas에 페인팅한다.

   6. root의 각 셀에 대해 트리 순서로, 셀의 배경을 canvas에 페인팅한다.

   7. root의 모든 테이블 요소의 테두리를 페인팅한다. 테두리가 분리되어 있으면, 트리 순서로 페인팅한다; 연결되어 있으면, [css-tables-3]에서 지정된 대로 수행한다.

라인 박스 내 박스 페인팅을 하려면, 박스 root, 라인 박스 line box, 캔버스 canvas가 주어졌을 때:

1. root의 프래그먼트 중 line box에 속한 것들의 배경을 canvas에 페인팅한다.

2. root의 프래그먼트 중 line box에 속한 것들의 테두리를 canvas에 페인팅한다.

3. root가 인라인 박스라면

   root의 in-flow, 위치 지정되지 않은, 인라인 레벨 자식 중 line box에 프래그먼트를 생성하는 자식, 그리고 텍스트 시퀀스 자식 중 line box에 프래그먼트를 생성하는 자식에 대해, 트리 순서로:

   이 자식이 텍스트 시퀀스라면:

   1. 텍스트에 적용된 밑줄을 페인팅한다. 밑줄을 적용한 요소의 트리 순서대로(가장 깊은 요소의 밑줄이 가장 위에 페인팅되고, 루트 요소의 밑줄이 가장 아래에 그려짐) canvas에 페인팅한다.

   2. 텍스트에 적용된 오버라인을 페인팅한다. 오버라인을 적용한 요소의 트리 순서대로(가장 깊은 요소의 오버라인이 가장 위에 페인팅되고, 루트 요소의 오버라인이 가장 아래에 그려짐) canvas에 페인팅한다.

   3. 텍스트를 canvas에 페인팅한다.

   4. 텍스트에 적용된 취소선(line-through)을 페인팅한다. 취소선을 적용한 요소의 트리 순서대로(가장 깊은 요소의 취소선이 가장 위에 페인팅되고, 루트 요소의 취소선이 가장 아래에 그려짐) canvas에 페인팅한다.

   이 자식이 박스라면:

   라인 박스 내 박스 페인팅을 해당 자식, line box, canvas에 대해 수행한다.

   root가 인라인 레벨 블록 또는 테이블 래퍼 박스라면

   스태킹 컨테이너 페인팅을 root, canvas에 대해 수행한다.

   root가 인라인 레벨 치환 요소라면

   치환된 콘텐츠를 canvas에 원자적으로 페인팅한다.

4. UA가 인밴드 윤곽선을 사용한다면, root의 프래그먼트 중 line box에 속한 것들의 윤곽선을 canvas에 페인팅한다.

참고: 인라인 박스의 프래그먼트의 시각적 순서가 양방향 재배치로 인해 라인 내에서 재배열될 수 있지만, 프래그먼트들은 트리 순서로 페인팅됩니다.

스태킹 컨테이너 페인팅을 하려면, 박스 root와 캔버스 canvas가 주어졌을 때:

1. 스태킹 컨텍스트 페인팅을 root, canvas에 대해 수행한다. root가 새로운 스태킹 컨텍스트를 생성하는 것처럼 취급하되, 위치 지정된 후손이나 실제로 스태킹 컨텍스트를 생성하는 후손은 생략한다 (부모 스태킹 컨텍스트가 대신 페인팅하도록 한다).