CSSアンカーポジショニングにおける、fixed と absolute の違いについて

Question

前提

CSSアンカーポジショニングのposition-anchorを設定できる要素は、『位置指定された要素』となっています（MDN）。

質問

fixed と absolute によって動作が違うようですが、これはどういった仕様によるものでしょうか。

現象

おそらく、absolute の場合は、親要素をアンカー要素と認識せずに兄弟要素をアンカー要素と認識するようです。

一方で、fixed の場合は、親要素・兄弟要素ともアンカー要素と認識するようです。

コード

<div>
    001
    <p>
        0002
    </p>
</div>
<p>
    00003
</p>

div {
    position: relative;
    anchor-name: --test;
    width: 5em
}

p {
    position: fixed;
    position: absolute;
    position-anchor: --test;
    position-area: right;
}

サンプル：
https://jsfiddle.net/Lhankor_Mhy/u9p74zjk/
（devtools で position を切り替えてお試しください）

補足

仕様に沿った回答が望ましいですが、私見でも構いません。
よろしくお願いいたします。

環境情報

Windows 10
Chrome 131

Comments

[kei344]

Firefoxではそもそも001と00003が横並びにならず、fixed/absoluteともに同じです。Chromeの問題では？

[juner]

@kei344
firefox / safari は未対応です。
https://caniuse.com/css-anchor-positioning

[kei344]

To: junerさん
確認不足でした、失礼しました。

Answer 1

アンカー要素がアンカー配置される要素よりも先にレイアウトが完了することが必要で、規格にはそれを満たすためのルールが細かく書かれています。

0002の要素について、absoluteの場合は親要素が包含ブロックで、親要素のレイアウトは0002のレイアウトが終わるまで完了しません。fixedの場合はビューポートが包含ブロックで、親要素のレイアウトは0002のレイアウトより先に完了します。

Comments

[Lhankor_Mhy]

ご回答ありがとうございます。
ということは、fixed の包含ブロックをビューポート以外にすると、absolute と同様の動作になるということなので、div に transform を当てるなどして試してみたところ、まさにおっしゃる通りの動作となりました。

改めて仕様書を確認すると、このあたりのアルゴリズムが関わっているのですね。
https://drafts.csswg.org/css-anchor-position-1/#acceptable-anchor-element

大変参考になりました。ありがとうございます。