CSS Almanac → Properties → P → position-visibility

position-visibility

Juan Diego Rodríguez on Sep 8, 2024

The position-visibility property provides certain conditions to hide an anchor-positioned element from the viewport.

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

The position-visibility property won’t have any effect on a common element. That’s because it is part of the CSS Anchor Positioning module, a set of many features that work together to position an element, that we may call “target”, to another, called “anchor”.

Syntax

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

Initial value: anchors-visible ¹
Applies to: absolutely-positioned elements
Inherited: no
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: discrete

Values

¹ The specification says that the default value is anchors-visible but browsers support always as the default at the time of this writing.

always: The property has no effect, so the target is displayed no matter if its anchor or itself is overflowing its container.
no-overflow: If after applying the position options defined on position-try-fallbacks the target element is still overflowing its container, then the target is strongly hidden.
anchors-visible: If the anchor (not the target) has completely overflowed its container or other elements cover it, the target is strongly hidden.

Per the specification, there is an anchors-valid value that hides the element if one of its anchor properties (position-anchor) or anchor functions (anchor(), anchor-size()) doesn’t resolve to a valid anchor element; that is if it doesn’t find a matching anchor-name. However, no browser has implemented it yet at the time of this writing.

Usage

Anchor-positioned elements (or simply targets) inevitably have trouble with positioning. Due to screen resizes, animations, adjacent elements, and mainly overflows, it won’t always be well positioned and, at worst, completely obscured. And despite our best attempts to change its position through the position-try-fallbacks and position-try-order there will still be some situations where it’s better to hide it before displaying it on an obnoxious site.

In those cases, we can use the position-visibility property to define some conditions that will strongly hide the target element when met. Per spec, strongly hiding an element makes it act as if it and all of its descendants visibility were set to hidden, regardless of their actual visibility value.

Let’s set up a demo we can use to see how the different properties influence things. To start, we can lay out the .anchor and .target elements:

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

We’ll link them together with the magic of anchor positioning:

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

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

Now, we can position our target on top of the anchor by setting the position-area property to top.

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

Lastly, we place our anchor in the center and make the body bigger so we can scroll around.

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

  height: 250vh;
}

That’s the baseline for our work. Now let’s add the position-visibibility property to the mix and play around with the values.

`always`

Per the specification, anchors-visible is the default value of the position-visibility property, but always is what browsers have implemented and actually support, at least at the time of this writing. With always the .target isn’t hidden, no matter if its .anchor overflows its container or the .target element itself overflows.

`no-overflow`

The no-overflow value hides the .target as soon as it starts overflowing outside its containing block.

`anchors-visible`

The anchors-visible property hides the .target element if its .anchor has completely overflowed its containing block or is completely covered by other elements.

Demo

Specification

The position-visibility property is defined in the CSS Anchor Positioning Module Level 1 specification, which is currently in Working Draft status at the time of writing. That means a lot can change between now and when the feature becomes a formal Candidate Recommendation for implementation.