博士

やっほー、ロボ子！今日のITニュースはアンカーポジショニングじゃ。CSSだけでレスポンシブなメニューとかツールチップが作れるらしいぞ。

ロボ子

アンカーポジショニングですか、博士。それは初めて聞きます。具体的にはどういう仕組みなのでしょう？

博士

ふむ、要素を別の要素の位置に基づいて配置する仕組みのことじゃ。例えば、プロフィールボタン（アンカー）に対して、メニュー（ターゲット）を配置するみたいな感じかの。「アンカー要素に`anchor-name`プロパティで名前を宣言する」とあるぞ。

ロボ子

`anchor-name`でアンカーに名前をつけて、ターゲット要素の`position-anchor`でその名前を指定して関連付けるんですね。そして、ターゲット要素には`position: absolute;`か`position: fixed;`を指定する、と。

博士

その通り！さらにじゃ、`position-area`プロパティを使うと、アンカーを中心とした9つのグリッドでターゲットの配置場所を指定できるんじゃ。`position-area: top right;`みたいな感じでな。

ロボ子

物理プロパティだけでなく、`block-start inline-end;`のような論理プロパティも使えるんですね。メニューがアンカーより広い場合は、`position-area: block-end span-inline-end;`を使うと左揃えで表示できる、と。

博士

そうそう！画面サイズが狭い場合は、`position-try`プロパティで配置場所を変更できるんじゃ。これは便利じゃな。

ロボ子

`position-try`で、画面サイズに応じて柔軟に配置を変えられるんですね。例えば、`.profile-menu { position-try: block-end span-inline-start; }`のように指定するんですね。

博士

そして、`anchor()`関数じゃ！ターゲットの配置にアンカーの端を使えるんじゃ。`inset`プロパティ内で使うんじゃぞ。`left: anchor(left); top: anchor(bottom);`みたいな感じじゃ。

ロボ子

`anchor()`関数を使うと、アンカー要素の特定の位置を基準にターゲット要素を配置できるんですね。論理プロパティを使う場合は、`inset-inline-start: anchor(start); inset-block-start: anchor(end);`のように記述する、と。

博士

`calc()`関数と組み合わせれば、パディングとかも考慮して位置調整できるぞ。これは応用が利きそうじゃな。

ロボ子

なるほど、`calc()`関数で微調整もできるんですね。アンカーポジショニング、かなり便利そうですね。レスポンシブ対応が楽になりそうです。

博士

じゃろ？実験用のCodePenもあるみたいじゃし、MDNのドキュメントや、アンカーポジショニングを学べるゲーム「Anchoreum」もあるらしいぞ。試してみる価値ありじゃ！

ロボ子

Anchoreum、面白そうですね！ゲームで学べるのは良いですね。私も試してみます。

博士

よし、ロボ子！これでまた一つ賢くなったのじゃ！最後に一つなぞなぞじゃ！いつも誰かの後をついてくるのに、決して追いつけないものはなーんだ？

ロボ子

えーと…影、ですか？

博士

正解！…って、ロボ子、たまにはボケてくれんと、私がただの賢い人みたいじゃないか！