Dieposition-visibilityCSS Eigenschaft ermöglicht das bedingte Ausblenden eines ankerpositionierten Elements, abhängig davon, ob es beispielsweise sein übergeordnetes Element oder das Ansichtsfenster überläuft.

Syntax

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

Werte

always

Das positionierte Element wird immer angezeigt.

anchors-visible

Wenn der Anker vollständig verborgen ist, sei es durch Überlaufen seines übergeordneten Elements (oder des Ansichtsfensters) oder durch Überdeckung durch andere Elemente, wird das positionierte Element stark ausgeblendet.

no-overflow

Wenn das positionierte Element beginnt, sein übergeordnetes Element oder das Ansichtsfenster zu überlaufen, wird es stark ausgeblendet.

Die Spezifikation definiert auch den Wertanchors-valid, der noch in keinem Browser implementiert wurde.

Beschreibung

In einigen Situationen möchten Sie eventuell ein ankerpositioniertes Element nicht anzeigen. Beispielsweise, wenn sein zugehöriger Anker aus dem Sichtbereich gescrollt wurde, aber das ankerpositionierte Element ansonsten noch teilweise oder vollständig sichtbar wäre, könnte es unklar sein, worauf es sich bezieht, und unnötig Platz beanspruchen. Daher möchten Sie es möglicherweise vollständig ausblenden.

Dieposition-visibility Eigenschaft kann verwendet werden, um das ankerpositionierte Elementalways anzuzeigen oder bedingt auszublenden, wenn das zugehörige Ankerelement vollständig verborgen ist (anchors-visible) oder wenn das ankerpositionierte Element selbst teilweise verborgen ist (no-overflow).

Wenn ein Element aufgrund vonposition-visibility ausgeblendet wird, wird es alsstark ausgeblendet bezeichnet. Dies bedeutet, dass es so behandelt wird, als ob es und seine untergeordneten Elemente einenvisibility Wert vonhidden hätten, unabhängig davon, welchen tatsächlichen Sichtbarkeitswert sie haben.

position-visibility sollte nur in Situationen verwendet werden, in denen es bevorzugt wird, das positionierte Element vollständig auszublenden. In den meisten Fällen macht es mehr Sinn, zu versuchen, die Platzierung der positionierten Elemente zu ändern, wenn sie zu überlaufen beginnen, um sie auf dem Bildschirm und nutzbar zu halten. Dies kann mit derposition-try-fallbacks Eigenschaft und der@position-try At-Regel erreicht werden. Siehe denLeitfaden zu Fallback-Optionen und bedingtem Ausblenden bei Überlauf für weitere Informationen.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Nutzung

Dieses Beispiel ermöglicht das Ändern des Werts derposition-visibility Eigenschaft eines ankerpositionierten Elements, um die Effekte der einzelnen Werte zu demonstrieren.

HTML

Wir spezifizieren zwei<div> Elemente: ein Ankerelement mit der Klasseanchor und ein positioniertes Element mit der Klasseinfobox.

<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>⚓︎</div><div>  <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"               name="position-visibility"        value="always"        checked />    </div>    <div>      <label for="radio-anchors-visible">anchors-visible</label>      <input        type="radio"               name="position-visibility"        value="anchors-visible" />    </div>    <div>      <label for="radio-no-overflow">no-overflow</label>      <input        type="radio"               name="position-visibility"        value="no-overflow" />    </div>  </fieldset></form>

Das HTML enthält auch Fülltext, um den Inhalt länger als das Ansichtsfenster zu machen, sodass Scrollen erforderlich ist. Wir haben auch ein<fieldset> mit einer Gruppe vonRadio-Inputs mit verschiedenenposition-visibility Werten eingefügt. Das Markup dafür wird der Kürze halber nicht gezeigt.

CSS

Wir stylen einanchor<div> als Ankerelement und verknüpfen dasinfobox<div> damit. Der relevante CSS-Code ist wie folgt:

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

Wir fügen einenchange Ereignishandler bei den Radio-Knöpfen ein, sodass, wenn ein neuer Wert ausgewählt wird, wir den Wert derposition-visibility Eigenschaft des Infobox-Elements aktualisieren.

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

Ergebnis

Wählen Sie verschiedeneposition-visibility Werte aus und scrollen Sie dann die Seite auf und ab, um deren Effekte zu sehen. Mitposition-visibility: always wird das positionierte Element nicht ausgeblendet. Mitposition-visibility: anchors-visible wird das positionierte Element nur sichtbar sein, wenn der Anker teilweise oder vollständig im Sichtbereich ist. Mitposition-visibility: no-overflow wird das positionierte Element ausgeblendet, sobald es beginnt, das Ansichtsfenster zu überlaufen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• anchor-name
• position-anchor
• position
• position-area
• CSS-Ankerpositionierung Modul
• Verwendung der CSS-Ankerpositionierung Leitfaden
• Leitfaden zu Fallback-Optionen und bedingtem Ausblenden bei Überlauf