부록 E. 스태킹 컨텍스트에 대한 상세 설명

이 장에서는 현행 표준 CSS 2.2의 페인팅 순서를 명세의 다른 부분보다 더 자세히 정의합니다.

E.1 정의

트리 순서

렌더링 트리의 전위 깊이 우선 순회이며, 양방향 콘텐츠의 경우 박스를 이동시키는 속성을 고려한 논리적(시각적이 아닌) 순서입니다.

요소

이 설명에서 "요소"는 실제 요소, 의사 요소, 그리고 익명 박스를 의미합니다. 의사 요소와 익명 박스는 적합한 위치에서 자손으로 처리됩니다. 예를 들어, 외부 리스트 마커는 인접한 ':before' 박스 앞에 위치하며, 이는 라인 박스 내에서 상자의 콘텐츠 앞에 위치하는 등의 순서를 따릅니다.

E.2 페인팅 순서

스택의 하단은 사용자로부터 가장 멀리 있으며, 상단은 사용자와 가장 가깝습니다:

	     |	   |	     |	  |
	     |		|    |	  |	⇦ ☻
	     |		|	  |	사용자
z-index:  캔버스  -1	0    1	  2

스태킹 컨텍스트 배경과 가장 음수로 위치된 스태킹 컨텍스트는 스택의 하단에 있으며, 가장 양수로 위치된 스태킹 컨텍스트는 스택의 상단에 위치합니다.

캔버스는 다른 캔버스 내에 포함될 경우 투명하며, 포함되지 않을 경우 UA가 정의한 색상을 가집니다. 이는 무한히 확장되며 루트 요소를 포함합니다. 초기에는 뷰포트가 캔버스의 원점에 상단 왼쪽 모서리로 고정됩니다.

스태킹 컨텍스트를 생성하는 요소의 자손에 대한 페인팅 순서('z-index' 속성 참조)는 다음과 같습니다:

1. 요소가 루트 요소인 경우:

   1. 캔버스 전체에 요소의 배경색.
   2. 루트 요소에 대해 페인팅된 경우 사용될 원점에 고정된 캔버스 전체의 요소 배경 이미지.

2. 요소가 블록, 리스트 아이템 또는 기타 블록 동등 요소인 경우:

   1. 루트 요소가 아닌 경우 요소의 배경색.
   2. 루트 요소가 아닌 경우 요소의 배경 이미지.
   3. 요소의 테두리.

   그렇지 않고 요소가 블록 수준 테이블인 경우:

   1. 루트 요소가 아닌 경우 테이블 배경(색상 및 이미지).
   2. 컬럼 그룹 배경(색상 및 이미지).
   3. 컬럼 배경(색상 및 이미지).
   4. 행 그룹 배경(색상 및 이미지).
   5. 행 배경(색상 및 이미지).
   6. 셀 배경(색상 및 이미지).
   7. 모든 테이블 테두리(분리된 테두리의 경우 트리 순서).

3. 음수 z-index(0 제외)를 가진 위치된 자손에 의해 형성된 스태킹 컨텍스트를 z-index 순서(가장 음수 먼저)와 트리 순서로.

4. 트리 순서에서 모든 인플로우, 비위치, 블록 수준 자손에 대해: 요소가 블록, 리스트 아이템 또는 기타 블록 동등 요소인 경우:

   1. 요소의 배경색.
   2. 요소의 배경 이미지.
   3. 요소의 테두리.

   그렇지 않은 경우, 요소가 테이블인 경우:

   1. 테이블 배경(색상 및 이미지).
   2. 컬럼 그룹 배경(색상 및 이미지).
   3. 컬럼 배경(색상 및 이미지).
   4. 행 그룹 배경(색상 및 이미지).
   5. 행 배경(색상 및 이미지).
   6. 셀 배경(색상 및 이미지).
   7. 모든 테이블 테두리(분리된 테두리의 경우 트리 순서).

5. 트리 순서에서 모든 비위치 부유 자손. 이 중 각 요소에 대해 새 스태킹 컨텍스트를 생성한 것처럼 요소를 처리하되, 위치된 자손 및 실제로 새 스태킹 컨텍스트를 생성하는 자손은 이 새 컨텍스트의 일부가 아니라 상위 스태킹 컨텍스트의 일부로 간주해야 합니다.

6. 요소가 스태킹 컨텍스트를 생성하는 인라인 요소인 경우:

   1. 요소가 속한 각 라인 박스에 대해:

      1. 해당 라인 박스 내 요소의 상자(트리 순서)에 대해 7.2.1로 이동.

7. 그렇지 않은 경우: 먼저 요소에 대해, 그런 다음 트리 순서에서 모든 인플로우, 비위치, 블록 수준 자손에 대해:

   1. 요소가 블록 수준 대체 요소인 경우: 대체 콘텐츠, 원자적으로.

   2. 그렇지 않은 경우, 해당 요소의 각 라인 박스에 대해:

      1. 해당 라인 박스 내 요소의 자식인 각 상자에 대해 트리 순서로:

         1. 요소의 배경색.

         2. 요소의 배경 이미지.

         3. 요소의 테두리.

         4. 인라인 요소의 경우:

            1. 해당 라인 박스에 있는 요소의 모든 인플로우, 비위치, 인라인 수준 자식 및 해당 라인 박스에 있는 요소 내부의 모든 텍스트 실행에 대해 트리 순서로:

               1. 이것이 텍스트 실행인 경우:

                  1. 요소 텍스트에 영향을 미치는 모든 밑줄, 밑줄을 적용하는 요소의 트리 순서(가장 깊은 요소의 밑줄이 최상단에 그려지고 루트 요소의 밑줄이 최하단에 그려지게 됨).
                  2. 요소 텍스트에 영향을 미치는 모든 윗줄, 윗줄을 적용하는 요소의 트리 순서(가장 깊은 요소의 윗줄이 최상단에 그려지고 루트 요소의 윗줄이 최하단에 그려지게 됨).
                  3. 텍스트.
                  4. 요소 텍스트에 영향을 미치는 모든 가로줄, 가로줄을 적용하는 요소의 트리 순서(가장 깊은 요소의 가로줄이 최상단에 그려지고 루트 요소의 가로줄이 최하단에 그려지게 됨).

               2. 그렇지 않은 경우, 해당 요소에 대해 7.2.1로 이동.

            인라인-블록 및 인라인-테이블 요소의 경우:

            1. 이 중 각 요소에 대해 새 스태킹 컨텍스트를 생성한 것처럼 요소를 처리하되, 위치된 자손 및 실제로 새 스태킹 컨텍스트를 생성하는 자손은 이 새 컨텍스트의 일부가 아니라 상위 스태킹 컨텍스트의 일부로 간주해야 합니다.

            인라인 수준 대체 요소의 경우:

            1. 대체 콘텐츠, 원자적으로.

         일부 상자는 라인 분할 또는 유니코드 양방향 알고리즘에 의해 생성되었을 수 있습니다.

      2. 선택적으로, 요소의 외곽선(아래 10 참조).

   3. 선택적으로, 요소가 블록 수준인 경우 요소의 외곽선(아래 10 참조).

8. 트리 순서에서 'z-index: auto' 또는 'z-index: 0'을 가진 모든 위치된 자손. 'z-index: auto' 값을 가진 경우, 요소를 새 스태킹 컨텍스트를 생성한 것처럼 처리하되, 위치된 자손 및 실제로 새 스태킹 컨텍스트를 생성하는 자손은 이 새 컨텍스트의 일부가 아니라 상위 스태킹 컨텍스트의 일부로 간주해야 합니다. 'z-index: 0' 값을 가진 경우, 생성된 스태킹 컨텍스트를 원자적으로 처리합니다.

9. z-index가 1 이상인 위치된 자손에 의해 형성된 스태킹 컨텍스트를 z-index 순서(가장 작은 것부터)와 트리 순서로.

10. 마지막으로, 위 단계에서 외곽선을 그리지 않는 구현은 이 단계에서 이 스태킹 컨텍스트에서 외곽선을 그려야 합니다(외곽선을 이 단계에서 그리는 것이 위 단계에서 그리는 것보다 권장됩니다).

E.3 참고

루트 요소의 배경은 캔버스 전체에 한 번만 그려집니다.

양방향 인라인의 배경은 트리 순서로 그려지는 반면, 시각적 순서로 배치됩니다. CSS 2.2에서 인라인 배경의 배치는 명시되지 않았으므로, 이 두 요구 사항의 정확한 결과는 UA에 의해 정의됩니다. CSS3는 이를 더 자세히 정의할 수 있습니다.