语法
/* 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 |
浏览器兼容性
加载中…