位置可见性 | CSS-Tricks

CSS 年鉴 → 属性 → P → position-visibility

Juan Diego Rodríguez 于 2024 年 8 月 21 日

position-visibility 属性提供某些条件来隐藏锚点定位元素于视口。

.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-visibility: no-overflow;
}

position-visibility 属性对普通元素没有任何影响。这是因为它属于 CSS 锚点定位模块的一部分，该模块是一组许多共同定位元素的功能，我们可能称之为“目标”到另一个称为“锚点”的元素。

语法

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

初始值：anchors-visible ¹
应用于：绝对定位元素
继承：否
百分比：n/a
计算值：按指定
规范顺序：按语法
动画类型：离散

值

¹ 规范指出默认值为anchors-visible，但在撰写本文时，浏览器支持always作为默认值。

always：该属性无效，因此无论其锚点或自身是否溢出其容器，目标都将显示。
no-overflow：如果在应用position-try-options上定义的定位选项后，目标元素仍然溢出其容器，则目标将被强制隐藏。
anchors-visible：如果锚点（而非目标）已完全溢出其容器或其他元素覆盖它，则目标将被强制隐藏。

根据规范，存在一个anchors-valid值，如果其锚点属性（position-anchor）或锚点函数（anchor()、anchor-size()）未解析为有效的锚点元素，则隐藏元素；也就是说，如果它找不到匹配的anchor-name。但是，在撰写本文时，还没有浏览器实现它。

用法

锚点定位元素（或简称为目标）不可避免地会遇到定位问题。由于屏幕调整大小、动画、相邻元素，以及主要是溢出，它不会始终定位良好，最糟糕的情况是完全被遮挡。尽管我们尽最大努力通过position-try-options和position-try-order更改其位置，但仍然会有一些情况最好先隐藏它，然后再在令人讨厌的站点上显示它。

在这些情况下，我们可以使用position-visibility属性来定义一些条件，当满足这些条件时，将强制隐藏目标元素。根据规范，强制隐藏元素使其行为就像它及其所有后代的visibility都设置为hidden一样，而不管它们的实际可见性值如何。

让我们设置一个演示，我们可以使用它来查看不同属性如何影响事物。首先，我们可以布置.anchor和.target元素

<div class="anchor">anchor</div>
<div class="target">target</div>

我们将使用锚点定位的魔力将它们链接在一起

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

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

现在，我们可以通过将inset-area属性设置为top将我们的目标定位到锚点之上。

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top;
}

最后，我们将锚点放置在中心，并使主体更大，以便我们可以四处滚动。

body {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 250vh;
}

这是我们工作的基础。现在让我们将position-visibibility属性添加到组合中，并尝试不同的值。

`always`

根据规范，anchors-visible是position-visibility属性的默认值，但always是浏览器已实现并实际支持的值，至少在撰写本文时是如此。使用always，.target不会隐藏，无论其.anchor是否溢出其容器或.target元素本身是否溢出。