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

目次

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

基本的なサンプル

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
Copyright (C) 2024 杜甫々
初版:2024年12月22日 最終更新:2024年12月22日
https://www.tohoho-web.com/ex/anchor-positioning.html