CSS - position-visibility

• トップ
• CSSリファレンス
• position-visibility

概要

説明

アンカーポジショニングにおいて配置ボックスの表示・非表示を制御します。アンカーポジショニングに関する詳細は「とほほのアンカーポジショニング入門」を参照してください。

always

配置ボックスを常に表示します。

anchors-valid

配置ボックスのターゲットとするアンカーが特定できない場合に配置ボックスを非表示にします。)

anchors-visible

配置ボックスがターゲットとするアンカーがスクロールアウトなどで表示されなくなる場合、配置ボックスも非表示にします。

no-overflow

配置ボックスが position-try で位置補正されても、一部でもスクロールアウトなどで表示されなくなる場合、配置ボックスを非表示にします。

anchors-valid, anchors-visible, no-overflow はスペース区切りで複数記述することができます。

※ Chrome 131 の実装ではデフォルトが always になっていて、always と no-overlow しかサポートされていない...？ 要確認。

使用例

.my-positioned-box {
  position-visibility: no-overflow;
}

リンク

• https://drafts.csswg.org/css-anchor-position-1/#position-visibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/position-visibility