語法
/* Single values */
position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;
/* Global values */
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 屬性可用於 always 顯示錨點定位元素，或者在關聯的錨點元素完全隱藏 (anchors-visible) 或錨點定位元素本身部分隱藏 (no-overflow) 時有條件地隱藏它。
當元素由於 position-visibility 而隱藏時，它被稱為強隱藏。這意味著它將表現得像它及其後代元素都設定了 visibility 值 hidden，無論它們實際的 visibility 值是什麼。
position-visibility 僅應在更傾向於完全隱藏定位元素的情況下使用。在大多數情況下，當定位元素開始溢位時，嘗試更改其位置以使其保持在螢幕上並可用更有意義。這可以透過 position-try-fallbacks 屬性和 @position-try at-rule 來完成。有關更多資訊，請參閱溢位的回退選項和條件隱藏指南。
正式定義
正式語法
position-visibility =
always |
[ anchors-valid || anchors-visible || no-overflow ]
示例
基本用法
此示例允許更改錨點定位元素的 position-visibility 屬性值，以演示每個值的效果。
HTML
我們指定了兩個 <div> 元素；一個帶有 anchor 類的錨點元素，以及一個帶有 infobox 類的定位元素。
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
HTML 還包含填充文字，使內容高於視口，因此需要滾動。我們還包含一個 <fieldset>，其中包含一組帶有不同 position-visibility 值的 單選輸入。為簡潔起見，未顯示它們的標記。
CSS
我們將 anchor <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 時，定位元素一旦開始溢位視口就會隱藏。
規範
| 規範 |
|---|
| CSS 錨點定位 # position-visibility |
瀏覽器相容性
載入中…