とほほのアンカーポジショニング入門

目次

アンカーポジショニングとは

基本的なサンプル

CSS
.my-anchor {
  position: relative;
  top: 6rem;
  left: 20rem;
  background-color: #339;
  color: #fff;
  padding: .2rem;
  width: 5rem;
  text-align: center;
  anchor-name: --my-anchor;
}
.my-positioned-box {
  background-color: #eee;
  border: 1px solid #ccc;
  width: 10rem;
  padding: .2rem;
  position-anchor: --my-anchor;
  position: absolute;
  position-area: bottom span-right;
  position-try-fallbacks: top span-left;
}
HTML
<div class="my-anchor">Anchor</div>
<div class="my-positioned-box">
  <div>Menu1</div>
  <div>Menu2</div>
  <div>Menu3</div>
</div>
表示
Anchor
Menu1
Menu2
Menu3

枠のサイズを変更してメニューが隠れるようにすると、メニューが左上に移動します。

アンカー要素に名前を付ける(anchor-name)

anchor-name でポジショニングの対象となるアンカー要素にアンカー名をつけます。アンカー名は -- で始まる名前を指定します。

.my-anchor {
    :
  anchor-name: --my-anchor;
}

アンカー位置指定要素からアンカー要素を参照する(position-anchor)

アンカー位置指定要素には、position-anchor で対象とするアンカー要素を指定します。

.my-positioned-box {
    :
  position-anchor: --my-anchor;
}

アンカー位置指定要素の表示位置を決める(position-area)

position-area はアンカー位置指定要素の位置を指定します。アンカー位置指定要素には position: absolute も指定する必要があります。

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

bottom span-right などの位置は下記の ①～⑧ のどの位置に表示するかを指定しています。

①②③
④Anchor⑤
⑥⑦⑧

画面からはみ出す場合の位置補正(position-try-fallbacks)

位置指定(top, ...)

position-try-fallbacks には、アンカー位置指定要素が画面からはみだした場合に移動させる位置を指定します。下記の例では、通常は bottom span-right の位置に表示しますが、画面からはみ出す場合は bottom span-left、それでもはみ出す場合は top span-right、それでもはみ出す場合は top span-left の位置に表示します。

.my-positioned-box {
    :
  position-area: bottom span-right;
  position-try-fallbacks: bottom span-left, top span-right, top span-left;
}
表示
Anchor
Menu1
Menu2
Menu3

フリップ指定(flip-...)

position-try-fallbacks には下記の値を指定することもできます。

下記の例では、横方向にはみ出す場合は左側に反転し、縦方向にはみ出す場合は上側に反転します。

.my-positioned-box {
    :
  position-area: bottom span-right;
  position-try-fallbacks: flip-inline, flip-block;
}
表示
Anchor
Menu1
Menu2
Menu3

名前指定(@position-try)

position-try-fallbacks には @position-try で定義した名前を指定することもできます。下記の例ではアンカー位置指定要素がはみ出す場合、--bottom-left の位置に、それでもはみ出す場合は --top-right の位置に、それでもはみ出す場合は --top-left の位置に表示します。

@position-try --bottom-left { position-area: bottom span-left; }
@position-try --top-right { position-area: top span-right; }
@position-try --top-left { position-area: top span-left; }
.my-positioned-box {
  position-area: bottom span-right;
  position-try-fallbacks: --bottom-left, --top-right, --top-left;
}
表示
Anchor
Menu1
Menu2
Menu3

位置補正の優先順位(position-try-order)

position-try-order には、position-try-fallbacks で指定した補正位置の優先度を指定します。

下記の例では通常時は右上(top span-right)に表示します。横幅が狭くなり表示しきれなくなると、左下(bottom span-left) と右下(bottom span-right) の内、横幅を最大限に確保できる方に位置補正します。

CSS
.my-positioned-box {
    :
  position-area: top span-right;
  position-try-fallbacks: bottom span-left, bottom span-right;
  position-try-order: most-width;
}
HTML
<div class="my-anchor">Anchor</div>
<div class="my-positioned-box">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
表示
Anchor
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

ショートハンド(position-try)

position-try は、position-try-fallbacks と position-try-order をまとめて指定することができるショートハンドです。

CSS
.my-positioned-box {
  /* position-try-order: most-width; */
  /* position-try-fallbacks: bottom span-right, top-span-left; */
  position-try: most-width bottom span-right, top-span-left;
}

アンカースコープ(anchor-scope)

anchor-scope で指定したアンカー名はこの要素の子孫要素からのみ参照可能な名前となります。ひとつのページにアンカー要素とアンカー位置指定要素のペアを複数記述する場合、個々に別々のアンカー名を指定する必要がありますが、anchor-scope でアンカー名の参照可能スコープを指定することにより、同じ名前を使用できるようになります。Chrome 131 からサポートされます。

CSS
.my-anchor-and-positioned-box {
  anchor-scope: --my-anchor;
  .my-anchor {
    anchor-name: --my-anchor;
  }
  .my-positioned-box {
    position-anchor: --my-anchor;
  }
}
HTML
<div class="my-anchor-and-positioned-box">
  <div class="my-anchor">Anchor</div>
  <div class="my-positioned-box">
    <div>Menu1</div>
    <div>Menu2</div>
    <div>Menu3</div>
  </div>
</div>

<div class="my-anchor-and-positioned-box">
  <div class="my-anchor">Anchor</div>
  <div class="my-positioned-box">
    <div>Menu1</div>
    <div>Menu2</div>
    <div>Menu3</div>
  </div>
</div>

非表示制御(position-visibility)

position-visibility はアンカー要素やアンカー位置指定要素の状態によってアンカー位置指定要素の表示・非表示を制御します。no-overflow を指定するとアンカー位置指定要素の一部でもスクロールアウトするとアンカー位置指定要素全体が非表示になります。他の値については position-visibility を参照してください。

CSS
.my-positioned-box {
    :
  position-visibility: no-overflow;
}
表示
Anchor
Box

anchor()関数

position-area の代わりに anchor() 関数を用いてアンカー位置指定要素の位置を指定することもできます。下記の例ではアンカー位置指定要素の上端(top)をアンカー要素の下部(bottom)に、アンカー位置指定要素の左端(left)をアンカー要素の左端(left)に位置づけます。

.my-positioned-box {
  position-anchor: --my-anchor;
  /* position-area: bottom span-right; */
  top: anchor(bottom);
  left: anchor(left);
}
表示
Anchor
Menu1
Menu2
Menu3

position-anchor でアンカー名を指定する代わりに anchor() の第1引数でアンカー名を指定することもできます。

.my-positioned-box {
  /* position-anchor: --my-anchor; */
  top: anchor(--my-anchor bottom);
  left: anchor(--my-anchor left);
}

引数には top, bottom, left, right, start, end, self-start, self-end, inside, outside, center, <percentage> を指定することができます。詳細は anchor() を参照してください。

anchor-size()関数

anchor-size() 関数はアンカー要素の横幅や高さを計算します。下記の例では、アンカー位置指定要素の高さをアンカー要素の2倍、横幅もアンカー要素の2倍の大きさに指定しています。

.my-positioned-box {
  height: calc(anchor-size(height) * 2);
  width: calc(anchor-size(width) * 2);
}

anchor-center 値

アンカー位置指定要素をアンカー要素の中央に表示するために、justify-self, align-self, justify-items, align-items プロパティに新しい値 anchor-center が追加されました。通常 justify- は横方向、align- は縦方向を意味します。-self はアイテム自身に、-items はアイテムを含むコンテナに指定します。

CSS
.my-positioned-box {
  justify-self: anchor-center;
  align-self: anchor-center;
}
表示
Anchor
Box

アンカーフォールバックコンテナクエリ(@container anchord())

container-type:anchored と @container anchord(fallback:...) を用いて、アンカー位置指定要素がアンカー要素に対してどの位置に表示されているかに応じて適用するスタイルを変更することができます。例えば下記の例では、アンカー位置指定要素が右下(bottom span-right)から左上(top span-left)にフォールバックされた時に、::after で追加した ★ の色を青から赤に変更しています。ただし、::before や ::after で追加したコンテンツに対してはスタイルが適用できるのですが、作成済のアンカー位置指定要素自体のスタイルは指定できないようです(謎)。2025年12月の Chrome 143 で実装されました。

CSS
.my-positioned-box {
    :
  position-try-fallbacks: top span-left;
  container-type: anchored;
  &::after {
    content: '★';
    color: blue;
  }
}
@container anchored(fallback: top span-left) {
  .my-positioned-box {
    &::after { color: red; }    /* ← このスタイルは適用される */
    color: red;                 /* ← このスタイルは適用されない */
  }
}
表示
Anchor
Menu1
Menu2
Menu3
Copyright (C) 2024 杜甫々
初版:2024年12月22日 最終更新:2024年12月22日
https://www.tohoho-web.com/ex/anchor-positioning.html