CSS Positioned Layout Module Level 4（日本語訳）

◎要約

この~moduleは、 `~CSS＠~CSSSNAPSHOT$において座標に基づいて［位置する, ~offsetする］ための~schemeとして，次に挙げるものを定義する【！contains defines】 ⇒＃ `相対~位置決め$, `張付き位置決め$, `絶対~位置決め$, `固定d位置決め$ ◎ This module contains defines coordinate-based positioning and offsetting schemes of CSS: relative positioning, sticky positioning, absolute positioning, and fixed positioning.

また、 ~CSSの［塗ng／描画］~modelも定義する。 ◎ It also defines the painting/rendering model of CSS.

~CSSisaLANG

1. 序論

これは、 `css-position-3$r に対する早期~差分~仕様である。 ◎ This is an early delta spec over [css-position-3].

2. 塗ng順序と積層~文脈

この節では~CSSの`~box~tree$の塗ng順序を述べる。 ◎ This chapter describes the painting order of CSS’s box tree.

`~box~tree$を辿るときには、 `~tree順序$が利用されることが多い。これは、断片化された~boxにおいては，`断片$たちの［視覚-順序ではなく，論理-順序］を指す。（これは、例えば，双方向な~textを描画するときに関連することもある。） ◎ When traversing the box tree, tree order is often used. For fragments, this refers to the logical order of the fragments, not the visual order. (This can be relevant, for example, when rending bidirectional text.)

塗ng順序は、 “画家の~model” で定義される — 各~要素は、一連の層たちが成す積層-内で塗るものとして述べられる。積層-は、最初は最も下端から順に描画される。利用者は、積層-の上端の上から積層-を見下ろしていることが含意される： ◎ Painting order is defined in terms of a "painter’s model", where elements are described as painting in a stack, with the bottom of the stack rendered "first", below items higher in the stack. The user is implied to exist above the top of the stack, looking down:

            |      |    |    |
            |      |    |    |   ⇦ ☻
            |      |    |    |   利用者
z-index:  canvas  -1    0    1

所与の`積層~文脈$ %積層~文脈において、 %積層~文脈の背景は，積層-の下端にある。【 %積層~文脈に属する~boxのうち】 `有位置$かつ`積層~文脈$を生成するもののうち，【`積層-~level$が】最も［負なもの／正なもの］は，積層-の［下端／上端］【利用者から見て，［最も奥／最も手前］】にある。 ◎ The stacking context background and most negative positioned stacking contexts are at the bottom of the stack, while the most positive positioned stacking contexts are at the top of the stack.

【加えて、親~積層~文脈は子~積層~文脈より下（奥）にある。】

`~canvas$の色は、別の何かの中に包含された場合には透明になり，そうでない場合は~UA定義になる。 `~canvas$は、広さ無限であり，根~要素を包含する。 `表示域$は、初期~時には，その左上隅が`~canvas$の原点にある。 ◎ The canvas is transparent if contained within another, and given a UA-defined color if it is not. It is infinite in extent and contains the root element. Initially, the viewport is anchored with its top left corner at the canvas origin.

`文書を塗る@ ときは、所与の ( 文書 %文書, 【！無限】`~canvas$ %~canvas ) に対し： ◎ To paint a document, given a document doc and an infinite canvas canvas:

`積層~文脈を塗る$( %文書の`根~要素$, %~canvas ) ◎ Paint a stacking context given doc’s root element and canvas.
%文書の`上端~層$を成す ~EACH( 要素 %要素 ) に対し： ◎ For each element el in doc’s top layer:
1. `積層~文脈を塗る$( %要素の `backdrop$pe 疑似要素, %~canvas ) ◎ Paint a stacking context given el’s ::backdrop pseudo-element and canvas.
2. `積層~文脈を塗る$( %要素, %~canvas ) — ［ %要素は`積層~文脈$を生成する］かつ［ %要素の`包含塊$は`初期~包含塊$である］ものと扱う下で ◎ Paint a stacking context given el and canvas, treating el as a stacking context, with the initial containing block as its containing block.

`積層~文脈を塗る@ ときは、所与の ( ［ `要素$／`疑似要素$／`~box$ ］ %根, 【！無限】`~canvas$ %~canvas, 真偽値 %積層~容器か（省略時は ~F ） ) に対し： ◎ To paint a stacking context given an element, pseudo-element, or box root, and an infinite canvas canvas:

【 %積層~容器かは、他所に述べられた要件を定式化するために導入した，この訳による追加。】

~IF［ %根は`要素$である］ ⇒ %根 ~SET %根の`首要~box$ 【！`積層~文脈を塗る$( %根の`首要~box$, %~canvas )】 ◎ If root is an element, paint a stacking context given root’s principal box and canvas, then return.
~Assert： %根は次を満たす ⇒ ［ `~box$である］~AND［ `積層~文脈$を生成している］ ◎ Assert: root is a box, and generates a stacking context.
~IF［ %根は`根~要素$の`首要~box$である］ ⇒ %~canvas 全体に %根の背景を塗る — その際の`背景~位置決め区画$の原点は、［ %根の背景が通常に塗られた場合に利用されることになる %~canvas 上の位置］とする ◎ If root is a root element’s principal box, paint root’s background over the entire canvas, with the origin of the background positioning area being the position on canvas that would be used if root’s background was being painted normally.
~IF［ %根は`塊~levelの~box$である］ ⇒ `塊の装飾を塗る$( %根, %~canvas ) ◎ If root is a block-level box, paint a block’s decorations given root and canvas.
%対象~子孫~群 ~LET %根の子孫のうち［ %根が生成した`積層~文脈$に属するもの］たちが成す集合

【この段は、この訳による補完。これは、当の積層~文脈の子~積層~文脈の子孫たちを除外する — それらは、再帰的な呼出nを通して塗られるので。】
%有位置~子孫~群~map ~LET 新たな`有順序~map$

【この訳では、有順序~mapを利用して，原文の記述を言い換える。】
◎ ↓
~IF［ %積層~容器か ~EQ ~T ］ ⇒ %対象~子孫~群から次を満たすものを除去する ⇒ ［ `有位置$である］~OR［ `積層~文脈$を生成している］
~ELSE ⇒ ［ %対象~子孫~群を成す`有位置$な各~子孫の`積層-~level$ ］たちが成す集合を成す ~EACH( %~level ) に対し，昇順に ⇒ %有位置~子孫~群~map[ %~level ] ~SET ［ %対象~子孫~群を成す子孫のうち，次を満たすもの］たちが成す`~tree順序$による集合 ⇒ ［ `有位置$である］~AND［ `積層-~level$ ~EQ %~level ］ ◎ ↓
%有位置~子孫~群~map を成す ~EACH( %~level → %子孫~群 ) に対し ⇒ ~IF［ %~level ~LT 0 ］ ⇒ %子孫~群を成す ~EACH( %子孫 ) に対し ⇒ `積層~文脈を塗る$( %子孫, %~canvas ) ◎ For each of root’s positioned descendants with negative (non-zero) z-index values, sort those descendants by z-index order (most negative first) then tree order, and paint a stacking context given each descendant and canvas.
%有位置でない子孫~群 ~LET %対象~子孫~群から`有位置$でない子孫を除去した結果の`~tree順序$による集合 ◎ ↓
%有位置でない子孫~群を成す ~EACH( %子孫 ) に対し ⇒ ~IF［ %子孫は`~flow内$にある］~AND［ %子孫は`塊~level$である］ ⇒ `塊の装飾を塗る$( %子孫, %~canvas ) ◎ For each of root’s in-flow, non-positioned, block-level descendants, in tree order, paint a block’s decorations given the descendant and canvas.
%有位置でない子孫~群を成す ~EACH( %子孫 ) に対し ⇒ ~IF［ %子孫は`浮動体$である］ ⇒ `積層~容器を塗る$( %子孫, %~canvas ) ◎ For each of root’s non-positioned floating descendants, in tree order, paint a stacking container given the descendant and canvas.
~IF［ %根は`行内~level$の`~box$である］ ⇒ %根が属する ~EACH( `行l~box$ %行l~box ) に対し ⇒ `~boxを行l~box内で塗る$( %根, %行l~box, %~canvas ) ◎ If root is an inline-level box • For each line box root is in, paint a box in a line box given root, the line box, and canvas.
~ELSE： ◎ Otherwise
1. 下に与える手続き( %根 ) ◎ First for root,＼
2. %有位置でない子孫~群を成す ~EACH( %子孫 ) に対し ⇒ 下に与える手続き( %子孫 ) ◎ then for all its＼
手続きは、所与の ( %~box ) に対し：
1. ~IF［ %~box ~NEQ %根］~AND［ %~box は`~flow内$にある］~AND［ %~box は`塊~level$である］ ⇒ ~CONTINUE
2. ~IF［ %~box は`置換d要素$である］ ⇒ 置換された内容を %~canvas に不可分に塗る
3. ~ELSE ⇒ %~box を成す ~EACH( `行l~box$ %行l~box ) に対し ⇒ `~boxを行l~box内で塗る$( %~box, %行l~box, %~canvas )
4. ~IF［ ~UAは`帯域~内の外形線$を利用している］ ⇒ %~box の`外形線$を %~canvas に塗る
◎ in-flow, non-positioned, block-level descendant boxes, in tree order: • If the box is a replaced element, paint the replaced content into canvas, atomically. • Otherwise, for each line box of the box, paint a box in a line box given the box, the line box, and canvas. • If the UA uses in-band outlines, paint the outlines of the box into canvas.
%有位置~子孫~群~map[ 0 ] を成す ~EACH( %子孫 ) に対し， %子孫の `z-index$p に応じて：
- `0^v ⇒ `積層~文脈を塗る$( %子孫, %~canvas )
- `auto^v ⇒ `積層~容器を塗る$( %子孫, %~canvas )
【これは、実際には，`積層~文脈$を生成しているか否かで場合分けするべきに思われる。 `auto^v は積層~文脈を生成しないことを意味するが、積層~文脈を生成させるものは， `z-index$p の他にもあるので。】
◎ For each of root’s positioned descendants with z-index: auto or z-index: 0, in tree order: • descendant has z-index: auto •• Paint a stacking container given the descendant and canvas. • descendant has z-index: 0 •• Paint a stacking context given the descendant and canvas.
%有位置~子孫~群~map を成す ~EACH( %~level → %子孫~群 ) に対し ⇒ ~IF［ %~level ~GT 0 ］ ⇒ %子孫~群を成す ~EACH( %子孫 ) に対し ⇒ `積層~文脈を塗る$( %子孫, %~canvas ) ◎ For each of root’s positioned descendants with positive (non-zero) z-index values, sort those descendants by z-index order (smallest first) then tree order, and paint a stacking context given each descendant and canvas.
~IF［ ~UAは`帯域~外の外形線$を利用している【！(those that it... 】］ ⇒ %根の`外形線$を %~canvas に塗る ◎ If the UA uses out-of-band outlines, draw all of root’s outlines (those that it skipped drawing due to not using in-band outlines during the current invocation of this algorithm) into canvas.

`塊の装飾を塗る@ ときは、所与の ( `塊~box$ %根, `~canvas$ %~canvas ) に対し： ◎ To paint a block’s decorations given a block box root and a canvas canvas:

~IF［ %根は`~table包装~box$でない］： ◎ If root is not a table wrapper box:
1. ~IF［ %根は`根~要素$の`首要~box$でない］ ⇒ %根の背景を %~canvas に塗る ◎ Paint root’s background to canvas if it is not the root element’s principal box.
2. %根の~borderを %~canvas に塗る ◎ Paint root’s border to canvas.
~IF［ %根は`~table包装~box$である］： ◎ If root is a table wrapper box:
1. ~IF［ %根は`根~要素$の`首要~box$でない］ ⇒ %根の背景を %~canvas に塗る ◎ Paint root’s background to canvas if it is not the root element’s principal box.
2. %根を成す ~EACH( ~column~group %~column~group ) に対し`~tree順序$で ⇒ %~column~group の背景を %~canvas に塗る ◎ For each column group of root in tree order, paint the column group’s background to canvas.
3. %根を成す ~EACH( ~column %~column ) に対し，`~tree順序$で ⇒ %~column の背景を %~canvas に塗る ◎ For each column of root in tree order, paint the column’s background to canvas.
4. %根を成す ~EACH( ~row~group %~row~group ) に対し`~tree順序$で ⇒ %~row~group の背景を %~canvas に塗る ◎ For each row group of root in tree order, paint the row group’s background to canvas.
5. %根を成す ~EACH( ~row %~row ) に対し`~tree順序$で ⇒ %~row の背景を %~canvas に塗る ◎ For each row of root in tree order, paint the row’s background to canvas.
6. %根を成す ~EACH( ~cell %~cell ) に対し`~tree順序$で ⇒ %~cell の背景を %~canvas に塗る ◎ For each cell of root in tree order, paint the cell’s background to canvas.
7. %根を成すすべての~table要素の~borderを塗る — %根の `border-collapse$p に応じて ⇒＃ `separate^v 【！separated】ならば`~tree順序$で／ `collapse^v 【！connected】ならば `css-tables-3$r にて指定されるとおりに ◎ Paint the borders of all of the table elements of root. If the borders are separated, do so in tree order; if connected, do so as specified in [css-tables-3].

`~boxを行l~box内で塗る@ ときは、所与の ( `~box$ %根, `行l~box$ %行l~box, `~canvas$ %~canvas ) に対し： ◎ To paint a box in a line box, given a box root, a line box line box, and a canvas canvas:

%根を成す ~EACH( `断片$ %断片 ) に対し ⇒ ~IF［ %断片は %行l~box 内にある］ ⇒ %断片の背景を %~canvas に塗る ◎ Paint the backgrounds of root’s fragments that are in line box into canvas.
%根を成す ~EACH( `断片$ %断片 ) に対し ⇒ ~IF［ %断片は %行l~box 内にある］ ⇒ %断片の~borderを %~canvas に塗る ◎ Paint the borders of root’s fragments that are in line box into canvas.
%根に応じて：
- `行内~box$である： ◎ If root is an inline box
  1. %根の子~群を成す ~EACH( %子 ) に対し，`~tree順序$で： ◎ For all root’s in-flow, non-positioned, inline-level children that generate fragments in line box, and all child text sequences that generate fragments in line box, in tree order: ◎ ↓
    1. ~IF［ %子は %行l~box 内に`断片$を生成しない］ ⇒ ~CONTINUE ◎ ↑
    2. ~IF［ %子は`~text連列$である］： ◎ If this child is a text sequence, then:
      1. %~text ~LET %子を成す~textのうち %行l~box 内に入る部分
        
        【この段は、以下を明確化するための，この訳による追加。 %子を成す~textは複数~行lに断片化されることもあるので。】
        ◎ ↓
      2. %~text に影響している ~EACH( 下線 %下線 ) に対し， %下線を適用している要素たちの`~tree順序$で ⇒ %下線を %~canvas 【の %~text が占める区間（以下同様）】に塗る【！(such that the deepest…】 ◎ Paint any underlining affecting the text, in tree order of the elements applying the underlining (such that the deepest element’s underlining, if any, is painted topmost and the root element’s underlining, if any, is drawn bottommost) into canvas.
      3. %~text に影響している ~EACH( 上線 %上線 ) に対し， %上線を適用している要素たちの`~tree順序$で ⇒ %上線を %~canvas に塗る【！(such that the deepest…】 ◎ Paint any overlining affecting the text, in tree order of the elements applying the overlining (such that the deepest element’s overlining, if any, is painted topmost and the root element’s overlining, if any, is drawn bottommost) into canvas.
      4. %~text を %~canvas に塗る ◎ Paint the text into canvas.
      5. %~text に影響している ~EACH( 打消線 %打消線 ) に対し， %打消線を適用している要素たちの`~tree順序$で ⇒ %打消線を %~canvas に塗る【！(such that the deepest…】 ◎ Paint any line-through affecting the text, in tree order of the elements applying the line-through (such that the deepest element’s line-through, if any, is painted topmost and the root element’s line-through, if any, is drawn bottommost) into canvas.
    3. ~ELSE （ %子は`行内~level$の`~box$である） ⇒ ~IF［ %子は`~flow内$にある］~AND［ %子は`有位置$でない］ ⇒ `~boxを行l~box内で塗る$( %子, %行l~box, %~canvas ) ◎ ↑ ◎ If this child is a box: • Paint a box in a line box given the child, line box, and canvas.
- `行内~level$の［ `塊~box$／`~table包装~box$ ］である ⇒ `積層~容器を塗る$( %根, %~canvas ) ◎ If root is an inline-level block or table wrapper box • Paint a stacking container given root and canvas.
- `行内~level$の`置換d要素$である ⇒ 当の置換d内容を %~canvas に不可分に塗る ◎ If root is an inline-level replaced element • Paint the replaced content into canvas, atomically.
~IF［ ~UAは`帯域~内の外形線$を利用している］ ⇒ %根の %行l~box 内の ~EACH( `断片$ %断片 ) に対し ⇒ %断片の`外形線$を %~canvas に塗る ◎ If the UA uses in-band outlines, paint the outlines of root’s fragments that are in line box into canvas.

注記：行内~boxを成す断片たちの視覚的な順序は，［ `双方向な並替ng＠~CSSWM#bidi-box-model$に因り，行lの中で配列し直され得る］が、それでも，断片たちは~tree順序で塗られる。 ◎ Note: Even though the visual order of inline box fragments can be rearranged within a line due to bidirectional reordering, the fragments are nevertheless painted in tree order.

`積層~容器を塗る@ ときは、所与の ( `~box$ %根, `~canvas$ %~canvas ) に対し： ◎ To paint a stacking container, given a box root and a canvas canvas:

`積層~文脈を塗る$( %根, %~canvas, ~T ) — ただし、 %根は新たな`積層~文脈$を生成しているものとして扱う

（これは、［ `有位置$な子孫, 積層~文脈を生成している子孫］の塗りを省略する（それらは，親~積層~文脈に塗らせる）ことを除いて， `積層~文脈を塗る$( %根, %~canvas ) と同様にふるまう）。
◎ Paint a stacking context given root and canvas, treating root as if it created a new stacking context, but omitting any positioned descendants or descendants that actually create a stacking context (letting the parent stacking context paint them, instead).

~UAは、（ `outline$p ~propによる）`外形線$を【任意選択で】次のいずれかにより描ける： ◎ UAs can draw outlines (from the outline property) either＼

`帯域~内の外形線@ （ `in-band^en ） ⇒ 各~要素の外形線を要素を塗るに伴い塗る — したがって、外形線は，要素に後続している内容に重合して遮られるようになり得る。 ◎ in-band (painted along each element, and thus potentially obscured/overlapping by following content) or＼
`帯域~外の外形線@ （ `out-of-band^en ） ⇒ すべての`外形線$を当の積層~文脈において最後に塗る — なので、当の積層~文脈~内には，外形線を遮るものは無い。 ◎ out-of-band (all outlines painted at the end of the stacking context, so nothing in the stacking context can obscure them).＼

~UAは、 `帯域~外の外形線$を利用することが推奨される — 外形線を容易に可視にすることは、 ~accessibility特能にとって重要なので。 ◎ It is recommended that UAs use out-of-band outlines, as making outlines easily visible is an important accessibility feature.

3. ~scroll可能な包含塊

ある要素が子孫~用に`絶対~位置決め包含塊$を生成するとき、それは，当の要素の`~padding~box$辺から生成される。当の要素は`~scroll容器$である場合、これは，`~scrollport$の寸法に対応するので，当の~scroll容器が~scrollされるに伴いズラされることはない。言い換えれば、それは，~scroll可能な区画【`~scroll可能な~overflow区画$？】の “外側” にある。 ◎ When an element generates an absolute positioning containing block for its descendants, that containing block is generated from the element’s padding box edges. If that element is a scroll container, this corresponds to the dimensions of the scrollport, and does not shift as the scroll container is scrolled. In other words, it’s "outside of" the scrollable area.

しかしながら，ときには、 `包含塊$は，代わりに当の~scroll容器の “内側” に基づくことが求まれる — ~scroll可能な内容に則って~sizeされ、当の容器が~scrollされるに伴い，ズラされるよう。 ◎ Sometimes, however, you instead want a containing block based on the "inside" of the scroll container, sized according to the scrollable contents and shifting as the container is scrolled.

【この “外側／内側” は、位置ではなく，~scroll容器の内容が成す~box~treeの［外, 内］どちらに “属する” かを意味する。 `課題 #10861＠~CSSissue/10861$ に論点がある（その論点の中の［ “CB” ／ “ICB” ／ “IMCB” ］は、［包含塊／`初期~包含塊$／`~insetで改変された包含塊$ ］の略語）。】

`~scroll容器$は、 `絶対~位置決め包含塊$を生成するときには，当の容器が生成する通常の`包含塊$に加えて【！it addition to】， `~scroll可能な包含塊@ も生成する。これは、 ~scroll可能な区画の`~padding~box$の辺に合致するよう~sizeされ， ~scroll可能な区画の “内側にある” ものとして扱われる — その結果、当の`~scroll容器$が~scrollされるに伴い，移動する。 ◎ Whenever a scroll container generates an absolute positioning containing block, it addition to the normal containing block it generates, it also generates a scrollable containing block. This is sized to match the padding box edges of the scrollable area, and is treated as being "inside" the scrollable area, so it moves as the scroll container is scrolled.

注記：これは、 `~scroll可能な~overflow矩形$とは，`少し違う^em — 特に、それは［変形された要素, `絶対的に位置され$た要素］による効果を含まない ◎ Note: This is not quite the scrollable overflow rectangle; in particular, it doesn’t include the effects of transformed elements or absolutely positioned elements.

`包含塊~連鎖$においては、要素により生成された`~scroll可能な包含塊$は，［当の要素の通常の`包含塊$の子である］かつ［当の要素の各~子孫により生成される包含塊の親【先祖？】］であると見なされる。 ◎ In containing block chains, the scrollable containing block generated by an element is considered a child of the element’s normal containing block, and a parent of any containing blocks generated by its descendants.

このことは，根~scroll容器（ `root scroller^en 【まだ未定義な用語】） — 文書~全体の~padding辺に対応するものとして生成される`~scroll可能な包含塊$ — にも適用され、それは，`初期~包含塊$の子であると見なされる。 ◎ This also applies to the root scroller; a scrollable containing block that corresponds to the padding edges of the entire document is generated, and is considered a child of the initial containing block.

`~scroll可能な包含塊$は，既定では利用されないが、ある種の~CSS特能（ `position-area$p など）は，通常の`包含塊$の代わりにそれを利用するものと指定し得る。 ◎ The scrollable containing block is not used by default, but certain CSS features (such as position-area) can specify that they use it instead of an element’s normal containing block.

4. 上端~層

各`文書$は `上端~層@ （ `top layer^en ）を有する — それは、当の文書~内の`要素$たちが成す`有順序~集合$である。 `上端~層$を成す各~要素は、通常に文書~tree内の位置に基づいて~lay-outされることはなく， `根~要素$の同胞であったかのように`~box$を生成する。 `上端~層$を成す要素たちは，`上端~層$内に現れる順序で描画され、それらのうち最後の要素は，他すべての上層に描画される。 ◎ Documents have a top layer, an ordered set containing elements from the document. Elements in the top layer do not lay out normally based on their position in the document; instead they generate boxes as if they were siblings of the root element. Top layer elements are rendered in the order they appear in the top layer; the last element in the top layer is rendered on top of everything else.

注記：この特別な描画の挙動は、 `上端~層~内に描画されて$いる【！`上端~層$内の】要素に対し，次を確保する

文書~内の何かにより切取られることはない。
［ `上端~層$内で要素より後にあるものを除く文書~内の何か］により遮られることはない。
`~popover$の様なものは、その先祖~要素が何を行おうが，依拠-可能に表示できる。

◎ Note: This special rendering behavior ensures that elements in the top layer cannot be clipped by anything in the document, or obscured by anything except elements later in the top layer. This ensures that things like popovers can be displayed reliably, regardless of what their ancestor elements might be doing.

要素 %要素の `上端~層~根@ （ `top layer root^en ）は、 %要素の先祖として【 %要素の`~node文書$の】`上端~層$を成すものは［在るならば，それらのうち %要素に最も近いもの／無いならば ε （ `none^en ）］とする（ ε の事例では、 %要素は通常通り当の文書を成す一部として塗られる）。 ◎ The top layer root of an element is its nearest ancestor element that is in the top layer, or none otherwise (in which case it’s painted as part of the document as normal).

所与の ( 要素 %A, 要素 %B ) に対し，［ %A の`~node文書$ ~EQ %B の`~node文書$ ］†とするとき： ◎ ↓

%A, %B は `同じ上端~層~内@ に在るとは、次が満たされることをいう ⇒ %A の`上端~層~根$ ~EQ %B の`上端~層~根$ （ ε の場合も含む） ◎ Two elements are in the same top layer if they have the same top layer root (including if both are none).＼
%A は %B `より高い上端~層~内@ に在るとは、 ~AND↓ が満たされることをいう：
- %A の`上端~層~根$ ~NEQ ε
- ［ %B の`上端~層~根$ ~EQ ε ］~OR［ ~AND↓ ］
  - %B の`上端~層~根$ ~NEQ ε
  - `上端~層$において， %A の`上端~層~根$は %B の`上端~層~根$より後に在る
【満たされるならば、 %A は %B より手前に塗られる。】
◎ An element A is in a higher top layer than an element B if A has a top layer root, and either B has a top layer root earlier in the top layer than A’s, or B doesn’t have a top layer root at all.

【† この前提条件は、この訳による補完。さもなければ、これらの定義を成す条件は［ %A, %B の`~node文書$が異なる場合でも，いずれかの`上端~層~根$が ε をとる場合］には満たされる事例が生じるが、それは，意図されるものではないであろう。】

注記：作者は、 `上端~層$を直に操作し得ない — それは、もっぱら，`~UA$が管理する。これは、 ~popupの中の~popupの様な，［上端~層を利用している~APIの “入子な” 呼出n ］が正しく表示されることを確保する。 ◎ Note: The top layer is managed entirely by the user agent; it cannot be directly manipulated by authors. This ensures that "nested" invocations of top-layer-using APIs, like a popup within a popup, will display correctly.

注記： `上端~層$は、 `overlay$p ~propと，いくぶん通例的でない仕方でヤリトリする。詳細は `overlay$p を見よ。 ◎ Note: The top layer interacts with the overlay property in a somewhat unusual way. See overlay for details.

各`文書$は、 `上端~層からの除去-待ち要素~群@ も有する — それは、除去~処理待ちな要素たちが成す`有順序~集合$である（これが，どう利用されるかについての詳細は、以下に与える各~algoを見よ）。 ◎ Documents also have a pending top layer removals ordered set, containing elements that are pending removal. (See the algorithms, below, for details on how this is used.)

他の仕様の~algoは、 `上端~層$（および`上端~層からの除去-待ち要素~群$）と直にヤリトリするベキでない。（`上端~層$を利用している個々の特能は、上端~層~内の様々なものに対する所有権を持つこともある — `~popover$の内側にある~popoverの様な，~groupとして［並替られる／移動される］必要があるものなど）。代わりに、他の仕様は，以下に与える~algoを利用するベキである。 ◎ The top layer (and the pending top layer removals) should not be interacted with directly by specification algorithms. (Individual features using the top layer might have ownership over various things in the top layer, like a popover inside of a popover, that need to be reordered or moved as a group.) Instead, specifications should use the following algorithms.

4.1. 上端~層の~style法

［ `上端~層~内に描画されて$いる要素］および［そのような要素を`出自の要素$とする `backdrop$pe 疑似要素］ %E は、次に挙げる~~性質を満たすように描画される： ◎ Every element rendered in the top layer, as well as its corresponding ::backdrop pseudo-element, are rendered with the following qualities:

%E は新たな`積層~文脈$を生成する。 ◎ It generates a new stacking context.
%E の親~積層~文脈は、根~積層~文脈になる。 ◎ Its parent stacking context is the root stacking context.
%E は、 `根~要素$【！文書の根】の同胞であったかのように，不可分な単位として描画される。 ◎ It is rendered as an atomic unit as if it were a sibling of the document’s root.

注記： %E の先祖~要素の［ `overflow$p, `opacity$p, `mask$p, 等々］は、この描画には影響し得ない。【 `inherit^v ~keywordで明示的に継承した場合は別として。】 ◎ Note: Ancestor elements with overflow, opacity, mask, etc. cannot affect it.
%E の`包含塊$は、 %E の `position$p ~propの算出d値に応じて［ `fixed$v ならば`表示域$／ ~ELSE_ `初期~包含塊$ ］になる。 ◎ If its position property computes to fixed, its containing block is the viewport; otherwise, it’s the initial containing block.
%E は要素であって， %E の`~shadowも含めた広義-先祖$に［ `display$p が `none^v をとるもの］がある場合、［ %E, および %E を`出自の要素$とする `backdrop$pe 疑似要素］は描画されない。 ◎ If it is an element, it and its ::backdrop pseudo-element are not rendered if its shadow-including inclusive ancestor has the display: none.
%E の `display$p ~propは、指定d値が `contents$v の場合には，算出d値は `block$v になる。 ◎ If its specified display property is contents, it computes to block.
%E の `position$p ~propは、指定d値が［ `absolute$v, `fixed$v ］以外の場合には，算出d値は `absolute$v になる。 ◎ If its specified position property is not absolute or fixed, it computes to absolute.
別の仕様により上書きされない限り、［左端, 右端, 上端］からの %E の`静的~位置$は，いずれも 0 になる。 ◎ Unless overridden by another specification, its static position for left, right, and top is zero.

4.2. `backdrop^pe 疑似要素

`上端~層~内に描画されて$いる各~要素には、【それを`出自の要素$とする】 `backdrop@pe 疑似要素がある。 ◎ Each element rendered in the top layer has a ::backdrop pseudo-element, for which it is the originating element.

`backdrop$pe 疑似要素は、その `content$p の算出d値が `none＠~CSSCONTENT#valdef-content-none$v 以外のときは、根~要素の同胞であったかのように~boxを生成する。それは、 `上端~層$内でその`出自の要素$の直下にある別々な~itemとして自動的に描画される（詳細は、 `文書を塗る$を見よ）。 ◎ When its computed content value is not none, ::backdrop pseudo-elements generate boxes as if they were siblings of the root element. They’re automatically rendered as a separate item in the top layer, below their originating element. (See "paint a document" for details.)

注記： `backdrop$pe 疑似要素は、上端~層~内の要素（~fullscreenに表示される要素など）用に［下層の文書を隠すための後景］を作成するために利用できる。 ◎ Note: The ::backdrop pseudo-element can be used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).

`backdrop$pe 疑似要素は、 `~treeに留まる疑似要素$である。それは、すべての~propを受容し，その`出自の要素$から~propを継承する。【したがって、`全部的に~style可能な疑似要素$になる。】 ◎ The ::backdrop pseudo-element is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element.

~UAは、 ~UA~levelの~stylesheet内に次の規則を包含するベキである： ◎ User agents should contain the following rules in a UA-level style sheet:

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

他の仕様は、 `backdrop$pe 用の既定の描画に追加的な~propを指定し得る。 ◎ Other specifications can additional properties to the default ::backdrop rendering.

注記：例えば， `~fullscreen要素$（ `FULLSCREEN$r ）は、その `backdrop$pe を既定では`不透明な黒$として~styleする。 ◎ Note: For example, a fullscreen element (see [FULLSCREEN]) styles its ::backdrop as opaque black by default.

`backdrop$pe 疑似要素がどう描画されるかに関する追加的な詳細は、 `§ 上端~層の~style法＠#top-styling$を見よ。 ◎ See § 3.1 Top Layer Styling for additional details on how ::backdrop elements are rendered.

4.3. 上端~層に対する操作

`要素$ %要素が `上端~層~内@ に在るとは、次が満たされることをいう ⇒ ［ %要素 ~IN %要素の`~node文書$の`上端~層$ ］~AND［ %要素 ~NIN %要素の`~node文書$の`上端~層からの除去-待ち要素~群$ ］ ◎ An element el is in the top layer if el is contained in its node document’s top layer but not contained in its node document’s pending top layer removals.

注記：各~仕様は、 `上端~層$を操作しているときは，［ “`上端~層~内に描画されて$いる” ではなく，この概念］を利用するベキである。この概念を利用すれば、［ `overlay$p に対する遷移の有無］に応じて，あるいは［ 2 回の演算が［ある描画~更新から次回の描画~更新までの`合間^emに起きたか，ある描画~更新の`前後^emに起きたか］に応じて挙動が異なることは，避けられる。 ◎ Note: Specs should use this concept, rather than rendered in the top layer, when they are manipulating the top layer itself. Using this concept avoids the behavior being different based on whether there’s an overlay transition, or whether two operations happened between rendering updates or across them.

`要素$ %要素が `上端~層~内に描画されて@ いるとは、次が満たされることをいう ⇒ ［ %要素 ~IN %要素の`~node文書$の`上端~層$ ］~AND［ %要素の `overlay$p は `auto^v をとる］ ◎ An element el is rendered in the top layer if el is contained in its node document’s top layer, and el has overlay: auto.

注記：各~仕様は、［ `上端~層$を操作してはいない］が［要素が “他すべての上層にある” ときの描画の挙動に応答している］ときは，［ “`上端~層~内$に在る” ではなく，この概念］を利用するベキである。例えば，［所与の要素 %要素を`出自の要素$とする `backdrop$pe 疑似要素］の有無は、 %要素が`上端~層~内に描画されて$いることに依拠する — ［ %要素 ~IN `上端~層からの除去-待ち要素~群$ ］の場合でも、 %要素が “他すべての上層” に表示されている間は， `backdrop$pe 疑似要素は在る。 ◎ Note: Specs should use this concept, rather than in the top layer, when they are not manipulating the top layer itself, but rather responding to the rendering behavior of being "on top of everything". For example, the presence of a ::backdrop pseudo relies on the element being rendered in the top layer; even if the element is pending removal, it has a ::backdrop as long as it’s being displayed on top of everything.

`上端~層に要素を追加する@ ときは、所与の ( `要素$ %要素 ) に対し： ◎ To add an element to the top layer, given an Element el: To add an element to the top layer, given a Document doc and an Element el:

%文書 ~LET %要素の`~node文書$ ◎ Let doc be el’s node document.
~IF［ %要素 ~IN %文書の`上端~層$ ］： ◎ If el is already contained in doc’s top layer:
1. ~Assert： %要素 ~IN %文書の`上端~層からの除去-待ち要素~群$ （さもなければ、仕様の誤りである。） ◎ Assert: el is also in doc’s pending top layer removals. (Otherwise, this is a spec error.)
2. %文書の`上端~層$から %要素を`除去する$ ◎ Remove el from both doc’s top layer＼
3. %文書の`上端~層からの除去-待ち要素~群$から %要素を`除去する$ ◎ and pending top layer removals.
%文書の`上端~層$に %要素を`付加する$set ◎ Append el to doc’s top layer.
%文書の`上端~層~style要素~群$に %要素を追加する ◎ At the UA !important cascade origin, add a rule targeting el containing an overlay: auto declaration.

`上端~層から要素を除去するよう要請する@ ときは、所与の ( `要素$ %要素 ) に対し： ◎ To request an element to be removed from the top layer, given an Element el:

%文書 ~LET %要素の`~node文書$ ◎ Let doc be el’s node document.
~IF［ %要素 ~NIN %文書の`上端~層$ ］~OR［ %要素 ~IN %文書の`上端~層からの除去-待ち要素~群$ ］ ⇒ ~RET ◎ If el is not contained doc’s top layer, or el is already contained in doc’s pending top layer removals, return.
%文書の`上端~層~style要素~群$から %要素を除去する ◎ Remove the UA !important overlay: auto rule targeting el.
%文書の`上端~層からの除去-待ち要素~群$に %要素を`付加する$set ◎ Append el to doc’s pending top layer removals.

`上端~層から要素を即時に除去する@ ときは、所与の ( `要素$ %要素 ) に対し： ◎ To remove an element from the top layer immediately, given an Element el:

%文書 ~LET %要素の`~node文書$ ◎ Let doc be el’s node document.
%文書の`上端~層$から %要素を`除去する$ ◎ Remove el from doc’s top layer＼
%文書の`上端~層からの除去-待ち要素~群$から %要素を`除去する$ ◎ and pending top layer removals.
%文書の`上端~層~style要素~群$から %要素を除去する（もしあれば） ◎ Remove the UA !important overlay: auto rule targeting el, if it exists.

注記：この~algoは、特別な事例 — 上端~層から即時に（ `overlay$p に対する遷移などは，端折って）除去することが必要yな事例 — に限り，利用されることが意図される — ~modal~dialogが文書から除去されたときなど。ほとんどの場合、 `上端~層から要素を除去するよう要請する$方が適切になる。 ◎ Note: This algorithm is only intended to be used in special cases where removing something from the top layer immediately (bypassing things like an overlay transition) is necessary, such as a modal dialog that is removed from the document. Most of the time, requesting removal from the top layer is more appropriate.

`上端~層からの除去を処理する@ ときは、所与の ( `文書$ %文書 ) に対し： ◎ To process top layer removals, given a Document doc:

%文書の`上端~層からの除去-待ち要素~群$を成す ~EACH( 要素 %要素 ) に対し ⇒ ~IF［ %要素の `overlay$p の算出d値 ~EQ `none$v ］~OR［ %要素は`具現化されて$いない］ ⇒＃ %文書の`上端~層$から %要素を`除去する$； %文書の`上端~層からの除去-待ち要素~群$から %要素を`除去する$ ◎ For each element el in doc’s pending top layer removals: if el’s computed value of overlay is none, or el is not rendered, remove el from doc’s top layer and pending top layer removals.

注記：これは、 ~HTMLの`描画を更新する手続き＠~WAPI#update-the-rendering$の中から~callされることが意図される。他の~algoから~callされることは意図されない。 ◎ Note: This is intended to be called during the "Update the Rendering" step of HTML’s rendering algorithm. It is not intended to be called by other algorithms.

注記： `overlay$p に対する検査は、作者~levelの遷移により，任意に長く遅延され得る — 詳細は、 `§ 上端~層の制御-法＠#overlay$を見よ。 ◎ Note: The overlay check can be delayed arbitrarily long by author-level transitions; see § 3.4 Controlling the Top Layer: the overlay property for details.

4.4. 上端~層の制御-法： `overlay^p ~prop

◎名 `overlay@p ◎値 `none$v | `auto$v ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎順文法に従う ◎ア（注釈文を見よ） ◎表終

`overlay$p ~propは、［要素が`上端~層~内$に在るとき，実際に`上端~層~内に描画され$るか否か］を決定する。 ◎ When an element is in the top layer, the overlay property determines whether it is actually rendered in the top layer or not.

`none@v: 当の要素は、 `上端~層~内に描画され$ない。 ◎ The element isn’t rendered in the top layer.
`auto@v: 当の要素は、 `上端~層~内$に在るならば，`上端~層~内に描画され$る。 ◎ The element is rendered in the top layer if it is in the top layer.; 要素は、 ~boxを通常に文書~tree内の位置に基づいて生成するのではなく， ~boxを根~要素の同胞として生成する — ~boxは，それの “上に” 描画される。 ◎ Rather than generating boxes as part of its normal position in the document, it generates boxes as a sibling of the root element, rendered "above" it.

注記： `overlay$p は、いくぶん通例的でない~propである — それを設定し得るのは，~UAに`限られ^em、作者は，`まったく^em設定し得ないので。 ◎ Note: overlay is a somewhat unusual property, as it is only set by the user agent, and can’t be set by authors at all.

しかしながら，作者は、 `overlay$p ~propの値が`変化するとき^emに影響する能を`有する^em — それに対する `transition$p を設定することにより。これは、この遷移に揃う~animationを作者に許容する — 当の~animationにおいて欲される地点に限り，当の要素を上端~層［の内／から外］へ移動することで【具体的には、下の注記と `backdrop$pe の併用により？】。これは，例えば、要素を［ ~page上の通常の位置から~fade-outさせてから，新たな上端~層~位置へ~fade-inさせる］あるいは［その逆を行う］~animationを許容する。 ◎ However, authors do have the ability to affect when overlay changes its value, by setting a transition on the property. This allows an author to align an animation with the transition, with the element moving in or out of the top layer only at the desired point in the animation. This allows, for example, an animation that causes an element to fade out of its normal position on the page, then fade in at its new top-layer position, or vice versa.

`overlay$p ~propに対する~animationは、次に従うことを除いて，`離散的$に`補間-$したときと同じになる ⇒ `auto$v と他の値を補間するときは、［ 0 ~LT %p ~LT 1 ］を満たす %p 値は `auto$v に対応付けられる。 ◎ For animation, auto is interpolated as a discrete step where values of p such that 0 < p < 1 map to auto and other values of p map to the closer endpoint; if neither value is auto then discrete animation is used.

注記：これは、 `visibility$p に対する~animate法と類似する。ほとんどの`~easing関数$では、これにより，当の要素が［遷移の所要時間~全体にわたって`上端~層~内に描画され$る］よう保たれる — 要素が`上端~層$［に入るとき／から出るとき］どちらであれ。［ `step-start＠~CSSEASING#valdef-step-easing-function-step-start$v ／ `step-end＠~CSSEASING#valdef-step-easing-function-step-end$v ／ `linear$f ］を利用すれば、 `overlay$p の値がいつ切り替わるかをもっと精確に制御できる。 ◎ Note: This is similar to how visibility animates. With most easing functions, this will keep the element rendered in the top layer for the entire duration of the transition, whether it’s entering or leaving the top layer. step-start/step-end/linear() can be used to control when the value flips more precisely.

`~UA~stylesheet$内には、次の規則が在るモノトスル： ◎ User agents must have the following rule in their UA stylesheet:

* { overlay: none !important; }

注記：このことは、［作者／利用者］は `overlay$p ~propを`設定し得ない^emことを意味する — この~propは、もっぱら~UAにより制御される（要素の `overlay$p は、要素が`上端~層$内にある間，`上端~層~style要素~群$を介して `auto^v に設定される）。 ◎ Note: This means that the overlay property cannot be set by authors or users—it is entirely controlled by the user agent (which sets elements to overlay: auto, via another UA-!important rule, when they’re in the top layer).

加えて，~UAは、 `~UA~stylesheet$内に次のような［上の規則より優先される`~style規則$ ］が在るかのように挙動するモノトスル：

`上端~層~style要素~群$を成す要素たちを~targetにしている — すなわち、それらの要素のみを`~subject$とする “仮想の” 選択子を伴う。

各`文書$は、 `上端~層~style要素~群@ を有する — それは、要素たちが成す集合であり，初期~時は空とする。
次の宣言を包含している ⇒ `overlay: auto !important;^css

【この~style規則に関する記述や用語は、原文にて他の各所に述べられた要件を集約するための，この訳による追加。】

~UAは、自身の裁量で， `overlay$p に対し走っている`遷移^を除去しても`ヨイ^em。そのための条件は、意図的に未定義である。 ◎ User agents may, at their discretion, remove a running transition on overlay. The conditions for this are intentionally undefined.＼

注記：未定義としているのは、 `transition$p: `overlay 1e9s^v に類似な試みで，要素を`上端~層$に恒久的に保とうとする濫用~局面を防止するためである。 ◎ (This is to prevent potential abuse scenarios where a transition: overlay 1e9s; or similar attempts to keep an element in the top layer permanently.)