CSS - anchor()

• トップ
• CSSリファレンス
• anchor()

概要

説明

アンカーポジショニングにおいて配置ボックスの top, bottom, left, right を、アンカーのどの位置に隣接させるかを指定します。アンカーポジショニングに関する詳細は「とほほのアンカーポジショニング入門」を参照してください。

例えば次の例では、配置ボックスの top をアンカーの bottom に、配置ボックスの left をアンカーの right に隣接させます。配置ボックスの位置を指定するには他に position-area があります。position-area の方が直感的に指定することができます。

.my-positioned-box {
 top: anchor(bottom);
 left: anchor(right);
}

top, bottom, left, right

アンカーの top, bottom, left, right に隣接させます。

start, end

配置ボックス外部の文字の流れの開始方向、終了方向に隣接させます。縦書き、横書きにより変動します。

self-start, self-end

配置ボックス自身の文字の流れの開始方向、終了方向に隣接させます。縦書き、横書きにより変動します。

inside, outside

inside は配置ボックスがアンカーの内側に来るように、配置ボックスの上部をアンカーの上部、下部を下部、右端を右端、左端を左端に隣接させます。outside は配置ボックスがアンカーの外側に来るように、配置ボックスの上部をアンカーの下部、下部を上部、右端を左端、左端を右端に隣接させます。

center

縦軸の中央または横軸の中央に配置します。

<percentage>

start から end 方向に対してパーセントで指定した割合の位置に配置します。

使用例

.my-anchor {
 anchor-name: --my-anchor;
 position: relative;
 top: 20px;
 left: 100px;
 height: 24px;
 line-height: 24px;
 width: 120px;
 background-color: #339;
 color: #fff;
 text-align: center;
}
.my-positioned-box {
 position-anchor: --my-anchor;
 position: absolute;
 width: 200px;
 height: 30px;
 background-color: #eee;
 border: 1px solid #ccc;
 padding: .2rem;
 top: anchor(bottom);
 left: anchor(left);
}

<div class="my-anchor">Anchor</div>
<div class="my-positioned-box">Positioned Box</div>

リンク

• https://drafts.csswg.org/css-anchor-position-1/#anchor-pos
• https://developer.mozilla.org/ja/docs/Web/CSS/anchor