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