Position-visibility - CSS Property

(1) Actually, browsers use always as the initial value.

Syntax diagram of position-visibility.

Description of the position-visibility property.

The property position-visibility comes into play in the case of an element positioned by anchoring, that is, relative to another element called the anchor. For more information on anchor positioning, we invite you to check out the pages on anchor-name, position-anchor, or position-area.

The position-visibility property makes the positioned element disappear when its anchor is no longer visible, either because it has scrolled out of view or because it is hidden by another absolutely positioned element.

Let's remember that there is a position-try property and an at-rule with the same name, which often allow you to handle the display of the positioned element in a more subtle way.

Check out the page anchor-name for a tutorial on anchor positioning.

Values for position-visibility.

• position-visibility: always;

  The property has no effect. The positioned element is always displayed (unless it ends up outside the viewport).

  ⚓
  Text positioned
  above the anchor.
  Text positioned
  below the anchor.
• position-visibility: anchors-visible;

  `anchors-visible activates the hiding of positioned text in the following cases:

  • The anchor is out of the viewport.
  • The anchor is hidden by another positioned element.
  • The anchor itself is hidden (property visibility:hidden or display:none).

  Slowly scroll the container down, the text positioned above the anchor disappears when the image is no longer visible at all. When scrolling the page up, it’s the text above the anchor that disappears. You can also click the "Hide the anchor" button.

  ⚓
  Text positioned
  above the anchor.
  Text positioned
  below the anchor.
• position-visibility: anchors-valid; ⚠

  If the anchor associated with this element doesn't match a valid box, the positioned element is hidden.
  Browsers still handle this value very poorly.

  ⚓
  Text positioned
  above the anchor.
  Text positioned
  below the anchor.
• position-visibility: no-overflow;

  The element is completely hidden as soon as it starts to leave the viewport. To see this, gently scroll the container down: as soon as the positioned element begins to go out of the viewport, it disappears.

  If the element is positioned above the anchor, it's when it disappears upwards; if it's placed below the anchor, it's when the element disappears downwards. It's the same thing for positioning to the left or right of the anchor.

  ⚓

  Text positioned
  above the anchor.

  Text positioned
  below the anchor.

  
  It is possible to combine the three values anchors-visible, no-overflow, and anchors-valid.

• position-visibility: initial; (anchors-visible ⁽¹⁾) position-visibility: inherit; position-visibility: revert; position-visibility: revert-layer; position-visibility: revert-rule; position-visibility: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Simulator.

The simulator sets an anchor on the image; the positioned text is placed relative to this anchor. You can change the value assigned to position-visibility and check how the positioned text behaves.

For the anchors-visible value, lower the container height, or use the "Hide anchor" button.
For the no-overflow value, reduce the container width. As soon as the positioned text can no longer be fully displayed, it disappears completely.

Browsers compatibility with position-visibility.

Browsers now handle anchor positioning correctly, with a few exceptions.

• It seems that all elements involved in positioning (anchor and positioned elements) must have an ID, even if it isn’t used..
• There are behavioral differences between position:absolute and position:relative that the standard doesn’t talk about.

Notes:

(1) Samsung Internet does not support the position-anchor property with the value normal. It also doesn't fully support the anchor-visibility property.

(2) Android browser does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

(3) Doesn't fully support the anchor-visibility property.

(4) Firefox does not allow animation of the anchor() and anchor-size() functions.
It does not fully support the anchor-visibility property.

(5) Opera does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

1

Anchor
positioning

2

position-visibility
property

Estimated overall support.

86%

71%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

1

Androïd Brower

2

Chrome

3

Chrome pour Androïd

3

Edge

3

Firefox

4

Firefox pour Androïd

4

KaiOS Browser

Opéra

5

Safari

Safari sur IOS

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the position-visibility property.

• CSS Anchor Positioning - Level 1

  Absolute positioning relative to the page or screen can prove to be limited when you want to position an element relative to another.
  This specification describes the properties necessary to achieve this, as well as the functions anchor() and anchor-size() that allow you to set the position and dimensions of an element based on another.
  It also describes how to test several positioning possibilities to adapt to the context, particularly to the state of the page scrolling.

  Regarding position-visibility First presentation of the property position-visibility (anchoring positioning).
  

  June 29, 2023

  Working Draft.

  

  

  

See also about anchor positioning.

The properties, functions, and at-rule that manage anchor positioning are grouped in CSS Anchor Positioning. These are the ones listed below.

Properties:

Functions:

At-rules: