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