`position-visibility` CSS property

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.

Syntax

/* Single values */
position-visibility: always;
position-visibility: anchors-valid;
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;

Values

This property is specified as one of the following keyword values:

always

The positioned element is always displayed.

anchors-valid

If the positioned element's position-anchor value doesn't point to a valid anchor element, the positioned element will be strongly hidden.

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.

Description

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 in certain situations:

• anchors-visible: The associated anchor element is completely hidden.
• anchors-valid: The anchor-positioned element's position-anchor property doesn't reference a valid anchor-name set on an anchor element in the same document.
• no-overflow: The anchor-positioned element is partially or completely hidden.

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 Fallback options and conditional hiding for overflow guide for more information.

Formal definition

Formal syntax

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

Examples

Basic usage

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.

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

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

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:

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 #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

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

.infobox {
  position-anchor: --my-anchor;
  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.

Specifications

Browser compatibility

See also

• anchor-name
• position-anchor
• position
• position-area
• CSS anchor positioning module
• Using CSS anchor positioning guide
• Fallback options and conditional hiding for overflow guide