position-visibility

有限可用性

此功能不是基线，因为它在一些最常用的浏览器中不起作用。

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

position-visibility CSS 属性允许根据例如锚点是否超出其包含元素或视窗，有条件地隐藏锚点定位的元素。

语法

css

/* 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，无论其实际可见性值是什么。

position-visibility 仅应在完全隐藏定位元素是首选的情况下使用。在大多数情况下，当定位元素开始溢出时，尝试更改其位置以将其保持在屏幕上并可用更有意义。这可以通过 position-try-fallbacks 属性和 @position-try at-rule 完成。有关更多信息，请参阅处理溢出：尝试回退和条件隐藏指南。

正式定义

初始值	`anchors-visible`
应用于	绝对定位元素
继承	否
计算值	按指定
动画类型	离散

正式语法

position-visibility = 
  always                                              |
  [ anchors-valid || anchors-visible || no-overflow ]

示例

基本用法

此示例允许更改锚点定位元素的 position-visibility 属性的值，以演示每个值的效果。

HTML

我们指定了两个 <div> 元素；一个带有 anchor 类的锚点元素和一个带有 infobox 类的定位元素。

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque.
</p>

html

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

<form>
  <fieldset>
    <legend>Choose position visibility</legend>
    <div>
      <label for="radio-always">always</label>
      <input
        type="radio"
        id="radio-always"
        name="position-visibility"
        value="always"
        checked />
    </div>
    <div>
      <label for="radio-anchors-visible">anchors-visible</label>
      <input
        type="radio"
        id="radio-anchors-visible"
        name="position-visibility"
        value="anchors-visible" />
    </div>
    <div>
      <label for="radio-no-overflow">no-overflow</label>
      <input
        type="radio"
        id="radio-no-overflow"
        name="position-visibility"
        value="no-overflow" />
    </div>
  </fieldset>
</form>

HTML 还包括填充文本，以使内容的高度超过视窗，因此需要滚动。我们还包括一个带有 <fieldset> 的单选按钮组，这些单选按钮具有不同的 position-visibility 值。为了简洁起见，这些标记没有显示。

CSS

我们为 anchor <div> 设定了锚点元素的样式，并将 infobox <div> 绑定到它。相关的 CSS 如下所示

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

form {
  position: fixed;
  background: white;
  bottom: 2px;
  right: 2px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.anchor {
  anchor-name: --myAnchor;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
  position-area: top span-all;
  margin-bottom: 5px;
  position-visibility: always;
}

JavaScript

我们为单选按钮包括一个 change 事件处理程序，以便在选择新值时，更新 infobox 的 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

浏览器兼容性

BCD 表格仅在浏览器中加载