MENU

Edge 151でposition-anchorの初期値がnormalへ変更｜影響範囲とCSS監査方法

Microsoft Edge

Microsoft Edge 151では、CSSのposition-anchorプロパティの初期値がnoneからnormalへ変更されました。結論として、通常の絶対配置が一斉に崩れる変更ではありません。ただし、position-areaを指定しながらposition-anchorを省略しているポップオーバー、メニュー、ツールチップなどは、Edge 151で暗黙のアンカーが使われ、表示位置が変わる可能性があります。

優先して確認すべきなのは、position-areaがnone以外になっている要素です。従来の「アンカーを使わない表示」を維持したい場合はposition-anchor: noneを明示し、暗黙のアンカーを利用したい場合はautoを指定すると、CSSの意図が分かりやすくなります。

日程Fit。無料・登録不要。「いつ空いてる？」を、ひとつのリンクで。リンクを送って、○△×でかんたん日程調整。無料で日程を作る。
目次

Edge 151でposition-anchorがnormalになり表示が変わる理由

Microsoft Edge 151は2026年7月30日にリリースされ、position-anchorの初期値が従来のnoneからnormalへ変更されました。Microsoftは、CSS Anchor Positioning仕様やほかのブラウザーとの整合性を高める変更と説明しています。(Microsoft Learn)

position-anchorは、CSSアンカー配置で「どの要素を基準に配置するか」を指定するプロパティです。

たとえば、ボタンを基準にメニューを配置する場合、次のような関係になります。

  • ボタン：アンカーとなる基準要素
  • メニュー：アンカーを基準に移動する要素
  • position-anchor：使用するアンカーを選ぶ
  • position-area：アンカーの上、下、右など、配置する領域を選ぶ

今回のポイントは、normalが単純にautoやnoneと同じ値ではなく、position-areaの状態によって動作を切り替えることです。

noneからnormalへの変更内容

Edge 151より前とEdge 151以降の初期値は、次のように変わります。

Edgeのバージョンposition-anchorの初期値基本的な動作
Edge 151より前noneデフォルトアンカーを使用しない
Edge 151以降normalposition-areaの値に応じてnoneまたはauto相当になる

normalの判定は次のとおりです。

position-areaの状態normalの動作
noneposition-anchor: none相当
none以外position-anchor: auto相当

さらに、autoは暗黙のアンカー要素が存在する場合にその要素を使用し、存在しない場合はデフォルトアンカーを持ちません。CSS仕様でも、position-anchorの初期値はnormal、position-areaの初期値はnoneと定義されています。(CSS ワーキンググループのドラフト)

このため、次のような一般的なCSSは、Edge 151でも基本的に変化しません。

.panel {
  position: absolute;
  top: 40px;
  left: 20px;
}

position-areaを指定していないため、その初期値はnoneです。したがって、position-anchorの初期値がnormalになっても、実際にはnone相当として扱われます。

Edge 151の影響を受けるCSS

表示差が発生する可能性があるのは、主に次の条件が重なった場合です。

  1. 要素が絶対配置または固定配置されている
  2. position-areaがnone以外になっている
  3. position-anchorを明示していない
  4. 暗黙のアンカー要素が存在する

条件別に整理すると、次のようになります。

CSSとHTMLの状態Edge 151での影響
position-area: none原則として影響なし
position-areaを指定していない原則として影響なし
position-areaがnone以外だが暗黙アンカーがない見た目は変わらない可能性が高い
position-areaがnone以外で暗黙アンカーがある表示位置が変わる可能性あり
position-anchor: noneを明示済み初期値変更の影響なし
position-anchor: autoを明示済み初期値変更の影響なし
position-anchor: --triggerなど名前を明示済み初期値変更の影響なし

つまり、position-anchorを使用している全サイトを全面的に修正する必要はありません。まずposition-areaを検索し、その中からposition-anchorを省略している箇所を調べるのが効率的です。

Popover APIで表示位置が変わる代表例

今回の変更で特に確認したいのが、Popover APIとCSSアンカー配置を組み合わせたUIです。

次のHTMLでは、popovertargetによってボタンとポップオーバーの関係が作られています。

<button type="button" popovertarget="account-menu">
  アカウント
</button>

<div id="account-menu" popover class="account-menu">
  <a href="/profile">プロフィール</a>
  <a href="/logout">ログアウト</a>
</div>

CSSでposition-areaだけを指定し、position-anchorを省略しているとします。

.account-menu {
  margin: 0;
  inset: auto;
  position-area: bottom;
}

Popover APIでは、呼び出し元となるボタンが暗黙のアンカーとして関連付けられる場合があります。CSS Anchor Positioning仕様にも、Popover APIを利用すると、anchor-nameやposition-anchorを明示せずにアンカー関係を作れる例が示されています。(CSS ワーキンググループのドラフト)

このコードの動作は、初期値によって次のように変わります。

Edge 151より前

position-anchorの初期値はnoneです。

そのため、暗黙のアンカーが存在してもデフォルトアンカーとして使用されず、position-area: bottomが意図どおりに機能しない可能性があります。

Edge 151以降

position-anchorの初期値はnormalです。

position-areaがnoneではないため、normalはauto相当になります。暗黙のアンカーが利用できれば、ポップオーバーはボタンを基準に配置されます。

従来は別のtop、left、insetなどで配置されていた要素が、Edge 151ではボタン基準の位置へ移動する可能性があります。

表示を安定させる修正方法

対応方法は、「アンカーを使いたいか、使いたくないか」で決めます。

従来どおりアンカーを使わない場合

デフォルトアンカーを使用させたくない場合は、noneを明示します。

.account-menu {
  position-anchor: none;
}

position-area自体が不要なら、合わせて削除するかnoneへ戻します。

.account-menu {
  position-anchor: none;
  position-area: none;

  top: 48px;
  right: 0;
}

これにより、Edgeの初期値が変わっても、従来のtopやrightを使った配置を維持できます。

暗黙のアンカーを使う場合

Popover APIなどが作る暗黙のアンカーを意図的に使用する場合は、autoを明示すると分かりやすくなります。

.account-menu {
  margin: 0;
  inset: auto;

  position-anchor: auto;
  position-area: bottom;
}

normalのままでもEdge 151では動作しますが、autoを明示しておくと、コードを読む人が「暗黙のアンカーを使う設計」であると判断できます。

名前付きアンカーを使う場合

配置対象を明確に固定したい場合は、アンカー名を指定します。

.account-button {
  anchor-name: --account-button;
}

.account-menu {
  position: fixed;
  position-anchor: --account-button;
  position-area: bottom;
}

HTMLの暗黙的な関係だけに依存しないため、複数のボタンやメニューが混在するコンポーネントでも、どの要素を基準にするか把握しやすくなります。

position-anchorの値をどう使い分けるか

指定値動作適した場面
normalposition-areaに応じてnoneまたはauto相当になる仕様標準の動作に任せたい
noneデフォルトアンカーを使用しない従来の絶対配置を維持したい
auto暗黙のアンカーがあれば使用するPopover APIなどとの連携を明確にしたい
--名前指定した名前付きアンカーを使用する配置関係をCSSで明示したい

既存サイトの互換性を優先するなら、初期値に依存させず、コンポーネントごとに意図した値を明示する方法が安全です。

ただし、サイト全体へ次のような指定を追加するのは避けた方がよいでしょう。

* {
  position-anchor: none;
}

この指定は、Edge 151で正しく動くようになったポップオーバーや、暗黙のアンカーを意図しているコンポーネントまで無効化します。修正は、影響するメニューやツールチップなどの単位で行ってください。

既存サイトを監査する手順

position-areaを全文検索する

最初に、CSS、SCSS、CSS-in-JS、コンポーネントファイルを対象に、次の文字列を検索します。

position-area:

position-area: none以外の指定を抽出してください。

特に確認したい値は次のようなものです。

position-area: top;
position-area: bottom;
position-area: left;
position-area: right;
position-area: block-start;
position-area: block-end;

ビルド前のソースだけでなく、外部ライブラリから生成されたCSSや、テーマに含まれる共通スタイルも確認します。

position-anchorが明示されているか確認する

抽出した要素について、最終的なカスケードでposition-anchorがどうなっているか調べます。

次のいずれかが明示されていれば、今回の初期値変更に依存しません。

position-anchor: none;
position-anchor: auto;
position-anchor: --menu-trigger;

ソースコード上に指定があっても、別のセレクターによる上書きやショートハンドの影響で、最終値が変わっている可能性があります。Edge DevToolsの「計算済み」パネルで実際の値を確認することが重要です。

Popover APIを使う箇所を優先する

HTML内で次の属性を検索します。

popover
popovertarget

優先して確認したいUIは次のとおりです。

  • ドロップダウンメニュー
  • アカウントメニュー
  • コンテキストメニュー
  • ツールチップ
  • 入力補助パネル
  • 日付や色の選択パネル
  • ボタンに追従する通知

通常表示だけでなく、クリック、キーボード操作、画面幅変更、スクロール後の位置も確認してください。

Edge DevToolsでnoneへ切り替えて比較する

Edge 151で表示が変わった要素を選択し、DevToolsから一時的に次の指定を追加します。

position-anchor: none;

表示が元の位置へ戻る場合は、今回の初期値変更によって暗黙アンカーが有効になった可能性が高いと判断できます。

反対に、次の指定で意図した位置になる場合は、暗黙アンカーを使う設計としてCSSを整理できます。

position-anchor: auto;

コンソールで候補要素を抽出する方法

Edge 151でページを開き、DevToolsのコンソールに次のコードを入力すると、監査候補を抽出できます。

const candidates = [...document.querySelectorAll("*")]
  .map((element) => {
    const style = getComputedStyle(element);

    return {
      element,
      position: style.position,
      positionArea: style
        .getPropertyValue("position-area")
        .trim(),
      positionAnchor: style
        .getPropertyValue("position-anchor")
        .trim(),
    };
  })
  .filter(
    ({ position, positionArea, positionAnchor }) =>
      (position === "absolute" || position === "fixed") &&
      positionArea !== "none" &&
      positionAnchor === "normal"
  );

console.table(candidates);

このコードは、次の条件を満たす要素を表示します。

  • positionがabsoluteまたはfixed
  • position-areaがnone以外
  • position-anchorが初期値のnormal

抽出された要素がすべて不具合とは限りません。暗黙アンカーを正しく利用している要素も含まれます。表示位置とCSSの設計意図を確認し、none、auto、名前付きアンカーのいずれを明示するか決めてください。

ポップオーバーやメニューが操作後に生成されるサイトでは、対象UIを開いてからコードを再実行します。

よくある誤解と注意点

absoluteやfixedを使う要素がすべて影響を受けるわけではない

position-anchorは絶対配置されるボックスに関係するプロパティですが、position: absoluteやposition: fixedを使用しているだけでは表示差は発生しません。

position-areaがnone以外であり、さらに利用可能なアンカーが存在するかどうかが重要です。

normalは常にautoとして動くわけではない

position-anchor: normalは、position-area: noneならnone相当です。

次のCSSでは、暗黙アンカーは選択されません。

.panel {
  position: absolute;
  position-anchor: normal;
  position-area: none;
}

normalを常にautoと読み替えてしまうと、影響範囲を過大評価することになります。

position-areaがあっても暗黙アンカーがなければ変化しない

normalがauto相当になっても、利用可能な暗黙アンカーが存在しなければ、デフォルトアンカーは設定されません。

そのため、position-areaが指定されているだけで、必ず表示が変わるわけではありません。

既存CSSへ一律にnoneを追加しない

一律にposition-anchor: noneを設定すると、現在または今後のCSSアンカー配置を意図せず無効化する可能性があります。

まずposition-areaを使うコンポーネントを特定し、表示意図に応じて個別に修正してください。

Edge 151対応で実施すべきこと

Edge 151のposition-anchor初期値変更は、影響条件が限定されたCSS互換性変更です。通常の絶対配置だけを使っているページでは、大きな影響は想定されません。

対応は次の順序で進めると効率的です。

  1. プロジェクト内のposition-areaを検索する
  2. position-anchorを省略している要素を抽出する
  3. popoverやpopovertargetを使うUIを優先して確認する
  4. Edge 151でメニューやツールチップを実際に開く
  5. 従来配置を維持するならposition-anchor: noneを指定する
  6. 暗黙アンカーを使うならposition-anchor: autoを指定する
  7. 配置対象を固定したい場合は名前付きアンカーを使用する

最も重要なのは、ブラウザーの初期値へ依存したままにせず、アンカーを使うかどうかをCSS上で明示することです。これにより、Edge 151での表示差だけでなく、今後のブラウザー間の挙動差も把握しやすくなります。

Microsoft Edge
CSS Microsoft Edge position-anchor CSSアンカー配置

この記事を書いた人

佐藤健司のアバター 佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

関連記事

コメント

コメントする

目次