files/en-us/web/css/reference/properties/position-visibility/index.md
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-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;
always
anchors-valid
anchors-visible
no-overflow
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 {{cssxref("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 {{cssxref("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 {{cssxref("position-try-fallbacks")}} property and {{cssxref("@position-try")}} at-rule. See the Fallback options and conditional hiding for overflow guide for more information.
{{cssinfo}}
{{csssyntax}}
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 {{htmlelement("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 {{htmlelement("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:
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;
}
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.
{{ EmbedLiveSample("Basic usage", "100%", "180") }}
{{Specifications}}
{{Compat}}