CSSアンカーポジショニングへの、包含ブロックの影響について

概要

CSSアンカーポジショニングのposition-areaによる配置は、位置指定要素の包含ブロックにより影響を受ける。
（MDNは間違っているような？）

コードとサンプル

<main>
    <div class="anchor">2</div>
    <div class="positioned">aaaaaaaaaaaa</div>
</main>

main {
    position: absolute;
    left: 100px;
}

.anchor {
    width: max-content;
    anchor-name: --child;
    margin-left: 100px;
}

.positioned {
    position: absolute;
    position-anchor: --child;
    position-area: bottom span-right;
}

See the Pen CSSアンカーポジショニングと包含ブロック by lhankor_mhy (@lhankor_mhy) on CodePen.

ご覧の通り、position-area: bottom span-right;と指定していますが、そのような配置になっていません。¹

本来は、こうあってほしいのです。

解説

position-areaによる配置エリアは、位置指定要素の包含ブロックによって制限されます。
図にすると、以下のような感じです。

このコードですと、.positionedが位置指定要素に当たります。絶対配置されているため、その包含ブロックは直近の配置された祖先要素であるmainです。
もうお分かりかと思いますが、このコードですと、mainの幅が内在サイズ依存となっていたため、アンカー要素である.anchorのサイズに依存し、右端が同じ位置になっています。
そのため、前掲の図で言うとrightのスペースがなくなっているのが、思うように配置できなかった理由です。

ですので、位置指定要素を固定配置にするなど、包含ブロックを変更すると問題は解決します。
今後、Safariなどで対応が進めば使う機会が多くなると思いますので、注意が必要かと思います。アンカー位置指定要素は必ず固定配置にしておくのが無難かなと思うのですが、transformなど固定配置の包含ブロックになってしまうプロパティには悩まされるかもしれません。

MDNの記述が？？

なお、MDNの記述が間違っているように思えます。
（英語版も同様でした）

中央のタイルの寸法は、アンカー要素の包含ブロックによって定義され、中央のタイルとグリッドの外縁との間の距離は、位置指定要素の包含ブロックによって定義されます。
CSS アンカー位置指定の使用 - CSS: カスケーディングスタイルシート | MDN

と書いてあるのですが、仕様書を読む限り『中央のタイルの寸法は、アンカー要素によって定義され』の間違いではないかなあ……？

the start edge of the box’s pre-modification containing block, or the start edge of the default anchor box if that is more start-ward
the start edge of the default anchor box
the end edge of the default anchor box
the end edge of the box’s pre-modification containing block, or the end edge of the default anchor box if that is more end-ward.
CSS Anchor Positioning

1. 2026/01現在ですと、Firefoxでは想定された配置になります。おそらく、Firefoxのバグだと思います。https://qiita.com/lhankor_mhy/items/f994931dbedd2624eae5 ↩