Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The position-visibility CSS property enables conditionally hiding an anchor-positioned element depending on, for example, whether it is overflowing its containing element or the viewport.


/* 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;



The positioned element is always displayed.


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.


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 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.

Formal definition

Initial valueanchors-visible
Applies toabsolutely positioned elements
Computed valueas specified
Animation typediscrete

Formal syntax

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


Basic usage

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


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>

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.


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;
  inset-area: top span-all;
  margin-bottom: 5px;
  position-visibility: always;


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;


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.


CSS Anchor Positioning
# position-visibility

Browser compatibility

BCD tables only load in the browser

See also