position-visibility
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
position-visibility は CSS のプロパティで、アンカー位置指定された要素を、例えば包含要素やビューポートをはみ出しているかどうかになどよって、条件付きで非表示にすることができます。
構文
/* 単一の値 */
position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;
/* グローバル値 */
position-visibility: inherit;
position-visibility: initial;
position-visibility: revert;
position-visibility: revert-layer;
position-visibility: unset;
値
always-
この位置指定要素は常に表示されます。
anchors-visible-
アンカーが、その親要素（またはビューポート）からはみ出していたり、他の要素に覆われていたりして完全に隠れている場合、位置指定された要素は完全に非表示になります。
no-overflow-
位置指定要素が親要素またはビューポートからはみ出し始めた場合、その要素は完全に非表示になります。
仕様書は anchors-valid 値も定義していますが、どのブラウザーでも実装されていません。
解説
状況によっては、アンカー位置指定された要素を表示したくない場合があります。例えば、関連するアンカーがスクロールで画面外に移動したにもかかわらず、アンカー位置指定された要素が部分的または完全に表示されたままの場合、その要素が何を指しているのか不明確になり、不必要に空間を消費する可能性があります。そのため、完全に非表示にしたい場合があります。
position-visibility プロパティを使用すると、アンカー位置指定された要素を常に表示したり、関連するアンカー要素が完全に非表示の場合 (anchors-visible) や、アンカー位置指定された要素自体が部分的に非表示の場合 (no-overflow) に条件付きで非表示にしたりできます。
position-visibility によって要素が非表示にされた場合、それは完全に隠された状態と呼ばれます。これは、実際の可視性値にかかわらず、その要素と子孫要素の visibility 値が hidden に設定されたかのように動作するということです。
position-visibility は、位置指定要素を完全に非表示にすることを優先する場合にのみ使用すべきです。ほとんどの場合、位置指定要素がはみ出し始めた際に配置を変更し、画面上に表示されたまま使用できるようにしたほうが合理的です。これは position-try-fallbacks プロパティと @position-try アットルールで実現できます。詳細はオーバーフロー時の代替オプションと条件付き非表示のガイドを参照してください。
公式定義
| 初期値 | anchors-visible |
|---|---|
| 適用対象 | 絶対位置指定された要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
position-visibility =
always |
[ anchors-valid || anchors-visible || no-overflow ]
例
基本的な使い方
この例では、アンカー位置指定された要素の position-visibility プロパティの値を変更し、それぞれの値の効果を示すことができます。
HTML
2 つの <div> 要素を指定します。クラス anchor を持つアンカー要素と、クラス infobox を持つ位置指定要素です。
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>これは情報ボックスです。</p>
</div>
HTML には、コンテンツをビューポートより高くしてスクロールを必要とするようにするためのダミーテキストも含まれています。また、 <fieldset> で異なる position-visibility 値を持つラジオボタンのグループを追加しています。簡潔さを考慮し、これらのマークアップは省略しています。
CSS
アンカー要素として <div> をスタイル設定し、infobox <div> をそれに固定します。関連する CSS は以下の通りです。
.anchor {
anchor-name: --my-anchor;
}
.infobox {
position-anchor: --my-anchor;
position: fixed;
position-area: top span-all;
margin-bottom: 5px;
position-visibility: always;
}
JavaScript
ラジオボタンに change イベントハンドラーを追加し、新しい値が選択された際に情報ボックスの position-visibility プロパティ値を更新します。
const infobox = document.querySelector(".infobox");
const radios = document.querySelectorAll('[name="position-visibility"]');
for (const radio of radios) {
radio.addEventListener("change", setPositionVisibility);
}
function setPositionVisibility(e) {
infobox.style.positionVisibility = e.target.value;
}
結果
position-visibility の値を変えて、ページをスクロールして効果を確認してください。position-visibility: always を設定すると、配置された要素は非表示になりません。position-visibility: anchors-visible を設定すると、アンカーが部分的または完全に画面上に表示されている場合にのみ配置要素が表示されます。position-visibility: no-overflow を設定すると、配置要素がビューポートからはみ出し始めた時点で非表示になります。
仕様書
| Specification |
|---|
| CSS Anchor Positioning Module Level 1 # position-visibility |