123123●●options
124124
125125spec_title:CSS Anchor Positioning Module level 1
126- spec_date:2026 - 03 - 24
127- trans_update:2026 - 03 - 25
126+ spec_date:2026 - 03 - 27
127+ trans_update:2026 - 03 - 30
128128source_checked:251222
129129page_state_key:CSS
130130original_url:https://drafts.csswg.org/css-anchor-position-1/
274274f . anchor :#funcdef- anchor
275275t . anchor ( ) :#funcdef- anchor
276276f . env :~ CSSENV #funcdef- env
277+ 誤)f . env :~ CSSCOND5 #funcdef- supports - env
277278f . var :~ CSSVAR #funcdef- var
278279f . random :~ CSSVAL5 #funcdef- random
279280f . min :~ CSSVAL #funcdef- min
317318 vI . xxx :#valdef- position - area - xxx
318319
319320 t . anchor - name :#valdef- position - anchor - anchor - name
321+ vA . match - parent :#valdef- position - anchor - match - parent
320322vA . normal :#valdef- position - anchor - normal
321323vA . none :#valdef- position - anchor - none
322324vA . auto :#valdef- position - anchor - auto
@@ -2143,7 +2145,7 @@ <h3 title="Default Anchors: the position-anchor property">2.4. 既定の~anchor
21432145
21442146< div >
21452147◎名 `position-anchor@p
2146- ◎値 `normal$vA | `none$vA | `auto$vA | `anchor-name$t
2148+ ◎値 `normal$vA | `none$vA | `auto$vA | `anchor-name$t | `match-parent$vA
21472149◎初 `normal^v
21482150◎適 `絶対的に位置され$た~box
21492151◎継 されない
@@ -2220,6 +2222,25 @@ <h3 title="Default Anchors: the position-anchor property">2.4. 既定の~anchor
22202222◎
22212223The target anchor element selected by the specified <anchor-name> is the box’s default anchor element.
22222224</ dd >
2225+
2226+ < dt > `match-parent@vA</ dt >
2227+ < dd >
2228+ 当の~box用の`既定の~anchor要素$は、
2229+ 当の~boxの親
2230+ — あるいは、
2231+ 当の~boxは`疑似要素$である場合は,その`出自の要素$ —
2232+ の`既定の~anchor要素$が在って, それは`受容-可能な~anchor要素$になる†ならば,それになる
2233+ — 他の場合は無い。
2234+ ◎
2235+ Uses the same default anchor element as the parent—or originating element, if this is a pseudo-element—if any, and if that would be an acceptable anchor element. Otherwise, the box has no default anchor element.
2236+ </ dd >
2237+ < dd class ="trans-note "> 【†
2238+ 既定の~anchor要素の定義には,受容-可能な~anchor要素か否かは含まれない
2239+ (他所の記述は、
2240+ 既定の~anchor要素が受容-可能な~anchor要素でもあるものとは見做していない)
2241+ ので、
2242+ この条件は~~余計に感じられる。
2243+ 】</ dd >
22232244</ dl >
22242245
22252246< p >
@@ -2410,7 +2431,7 @@ <h3 title="The position-area Property">3.1. `position-area^p ~prop</h3>
24102431— < a href ="#position-area-computed "> § `position-area^t の算出d値と直列化</ a >
24112432を見よ
24122433◎順 文法に従う
2413- ◎ア (未策定)
2434+ ◎ア 離散的
24142435◎表終
24152436◎
24162437Name: position-area
@@ -2421,7 +2442,7 @@ <h3 title="The position-area Property">3.1. `position-area^p ~prop</h3>
24212442Percentages: n/a
24222443Computed value: the keyword none or a pair of keywords, see § 3.1.3 Computed Value and Serialization of <position-area>
24232444Canonical order: per grammar
2424- Animation type: TBD
2445+ Animation type: discrete
24252446</ div >
24262447
24272448< p >
@@ -3273,11 +3294,16 @@ <h3 title="Anchor-relative Insets: the anchor() function">3.2. ~anchorに相対
32733294For example, in the following chart, the three bars are set up as possible anchors, and the min/max lines and tooltips use min() and max() to combine anchor() functions referring to all three to find where to position themselves. You can use the range inputs below each column to adjust the heights, and see that the anchored lines and tooltips dynamically adjust to whichever bar is the highest/lowest.
32743295</ p >
32753296
3297+ < figure >
32763298< iframe
32773299 src ="css-anchor-position/calc-anchor.html "
32783300 style ="width: 40em; aspect-ratio: 5 / 3; margin: 1em "
32793301> </ iframe >
3280-
3302+ < figcaption >
3303+ `全部的な例@css-anchor-position/calc-anchor.html$
3304+ ◎
3305+ Full Example
3306+ </ figcaption > </ figure >
32813307< p >
32823308これを成遂げるための重要な~code片は:
32833309◎
@@ -3854,13 +3880,11 @@ <h3 title="Centering on the Anchor: the anchor-center alignment value">4.2. ~anc
38543880
38553881< div id ="_propdef-for-anchor-center ">
38563882◎名 `justify-self$p,
3857- `align-self$p,
3858- `justify-items$p,
3859- `align-items$p
3883+ `align-self$p
38603884◎新値 `anchor-center$vS
38613885◎表終
38623886◎
3863- Name: justify-self, align-self, justify-items, align-items
3887+ Name: justify-self, align-self
38643888New values: anchor-center
38653889</ div >
38663890
@@ -4188,15 +4212,20 @@ <h2 title="Overflow Management">6. ~overflowの管理</h2>
41884212< div >
41894213< p >
41904214例えば,次の~CSSは、
4191- ある “~popover”† ( `#myPopover^css )を
4192- まずは,[
4215+ ある “~popover”† ( `#myPopover^css )を,まずは[
41934216ある~anchor要素( `--button^v )の下に位置させ,
41944217当の[
41954218~popover, ~anchor
41964219]の始端どうしを整列させる
41974220]よう試みるが、
41984221~screenに収まらない場合には,他の組合nに切替える:
41994222</ p >
4223+
4224+ < p class ="trans-note "> 【†
4225+ 何らかの動作(この例では、~button上の~hoverなど)に呼応して,
4226+ 他のものの上層に表示される様な~UI。
4227+ 】</ p >
4228+
42004229< ul >
42014230 < li >
42024231< p >
@@ -4263,10 +4292,6 @@ <h2 title="Overflow Management">6. ~overflowの管理</h2>
42634292</ li >
42644293</ ol >
42654294
4266- < p class ="trans-note "> 【†
4267- 何らかの動作(この例では、~button上の~hoverなど)に呼応して,
4268- 他のものの上層に表示される様な~UI。
4269- 】</ p >
42704295◎
42714296For example, the following CSS will first attempt to position a "popover" below the element, but if it doesn’t fit on-screen will switch to being above. It defaults to start-aligning with the anchor, but will switch to end-aligning if that doesn’t fit. If it doesn’t fit on either side, it will take the whole horizontal space, while centering on the anchor as much as possible (thanks to § 4.1 Area-specific Default Alignment).
42724297</ div >
@@ -6088,6 +6113,35 @@ <h2 title="Privacy Considerations">~privacyの考慮点</h2>
60886113< h2 title ="Changes "> 変更点</ h2 >
60896114
60906115< dl >
6116+ < dt >
6117+ `2026年 1月 30日 作業草案@~TR/2026/WD-css-anchor-position-1-20260130/$
6118+ からの有意な変更点
6119+ ◎
6120+ Significant changes since the 30 January 2026 Working Draft:
6121+ </ dt >
6122+ < dd >
6123+ `position-area$p 用の値として `match-parent$vA を追加した。
6124+ ( `8913$issue )
6125+ ◎
6126+ Added match-parent value to position-area. (Issue 8913)
6127+ </ dd >
6128+ < dd >
6129+ `position-area$p を離散的に~animate可能になるものとした。
6130+ ( `13577$issue )
6131+ ◎
6132+ Marked position-area as discretely animatable. (Issue 13577)
6133+ </ dd >
6134+ < dd >
6135+ [
6136+ `align-items$p, `justify-items$p
6137+ ]用の値から `anchor-center$vS を除去した
6138+ — これらの~propには、
6139+ 絶対的に位置された~boxに対する効果は無いので。
6140+ ( `13514$issue )
6141+ ◎
6142+ Removed anchor-center from align-items and justify-items because those properties have no effect on absolutely-positioned boxes anyway. (Issue 13514)
6143+ </ dd >
6144+
60916145 < dt >
60926146`2025年 12月 22日 作業草案@~TR/2025/WD-css-anchor-position-1-20251222/$
60936147からの有意な変更点
0 commit comments