position-visibility

always

The positioned element is always displayed.

anchors-visible

If the anchor is completely hidden, either by overflowing its containing element (or the viewport) or being covered by other elements, the positioned element will be strongly hidden.

no-overflow

If the positioned element starts to overflow its containing element or the viewport, it will be strongly hidden.

The specification also defines the anchors-valid value, which has not yet been implemented in any browser.

In some situations you might not want to display an anchor-positioned element. For example, if its associated anchor has been scrolled offscreen but the anchor positioned element would otherwise still be partially or fully visible, it might be unclear what it refers to and take up space unnecessarily, so you may want to hide it altogether.

The position-visibility property can be used to always show the anchor-positioned element, or conditionally hide it if the associated anchor element is completely hidden (anchors-visible) or if the anchor-positioned element itself is partially hidden (no-overflow).

When an element is hidden due to position-visibility, it is referred to as strongly hidden. This means that it will act as though it and its descendant elements have a visibility value of hidden set, regardless of what their actual visibility value is.

position-visibility should only be used in situations in which hiding the positioned element altogether is preferred. In most cases, it makes more sense to attempt to change the placement of positioned elements when they start to overflow, to keep them on-screen and usable. This can be done with the position-try-fallbacks property and @position-try at-rule. See the Handling overflow: try fallbacks and conditional hiding guide for more information.

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

This example enables changing the value of an anchor positioned element's position-visibility property to demonstrate the effects of each value.

HTML

We specify two <div> elements; an anchor element with a class of anchor and a positioned element with a class of infobox.

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

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

The HTML also includes filler text to make the content taller than the viewport so scrolling is required. We've also included a <fieldset> with a group of radio inputs with different position-visibility values. The markup for these is not shown for the sake of brevity.

CSS

We style an anchor <div> as an anchor element and tether the infobox <div> to it. The relevant CSS is as follows:

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

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

JavaScript

We include a change event handler on the radio buttons so that, when a new value is selected, we update the infobox's position-visibility property value.

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;
}

Result

Select different position-visibility values and then scroll the page up and down to see their effects. With position-visibility: always set, the positioned element will not be hidden. With position-visibility: anchors-visible set, the positioned element will only be visible when the anchor is partially or fully on-screen. With position-visibility: no-overflow set, the positioned element will be hidden as soon as it starts to overflow the viewport.

• anchor-name
• position-anchor
• position
• position-area
• CSS anchor positioning module
• Using CSS anchor positioning guide
• Handling overflow: try fallbacks and conditional hiding guide