Dieposition-visibilityCSS Eigenschaft ermöglicht es, ein verankerungs-positioniertes Element bedingt auszublenden, je nachdem, ob es beispielsweise sein umgebendes 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 umgebenden Elements (oder des Ansichtsfensters) oder durch Überdeckung durch andere Elemente, wird das positionierte Element stark verborgen.

no-overflow

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

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

Beschreibung

In einigen Situationen möchten Sie möglicherweise ein verankerungs-positioniertes Element nicht anzeigen. Zum Beispiel, wenn der zugehörige Anker vom Bildschirm gescrollt wurde, das verankerte positionierte Element jedoch ansonsten noch teilweise oder vollständig sichtbar wäre, könnte es unklar sein, worauf es sich bezieht und unnötig Platz einnehmen. In solchen Fällen könnten Sie es vollständig ausblenden wollen.

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

Wenn ein Element aufgrund vonposition-visibility verborgen wird, wird es alsstark verborgen bezeichnet. Dies bedeutet, dass es so behandelt wird, als ob es und seine Nachkommelelemente denvisibility Werthidden gesetzt hätten, unabhängig davon, welchen tatsächlichen Sichtbarkeitswert sie haben.

position-visibility sollte nur in Situationen verwendet werden, in denen das vollständige Ausblenden des positionierten Elements bevorzugt wird. In den meisten Fällen ist es sinnvoller, zu versuchen, die Platzierung der positionierten Elemente zu ändern, wenn sie anfangen zu überlaufen, 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 für Fallback-Optionen und bedingtes Ausblenden bei Überfluss für weitere Informationen.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Nutzung

In diesem Beispiel wird das Ändern des Wertes der Propertyposition-visibility eines verankerungs-positionierten Elements ermöglicht, um die Effekte jedes Wertes zu demonstrieren.

HTML

Wir spezifizieren zwei<div> Elemente; ein Ankerelement mit einer Klasse vonanchor und ein positioniertes Element mit einer Klasse voninfobox.

<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 höher als das Ansichtsfenster zu machen, so dass Scrollen erforderlich ist. Wir haben auch ein<fieldset> mit einer Gruppe vonRadio-Eingaben mit unterschiedlichenposition-visibility Werten hinzugefügt. Die Markup für diese wird aus Gründen der Kürze nicht gezeigt.

CSS

Wir gestalten einanchor<div> als Ankerelement und verbinden dasinfobox<div> damit. Das relevante CSS 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 auf den Radio-Buttons hinzu, so dass, wenn ein neuer Wert ausgewählt wird, wir den Wert derposition-visibility Eigenschaft der Infobox 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 nach oben und unten, um deren Effekte zu sehen. Mitposition-visibility: always wird das positionierte Element nicht verborgen. Mitposition-visibility: anchors-visible wird das positionierte Element nur sichtbar, wenn der Anker teilweise oder vollständig auf dem Bildschirm 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 Anker-Positionierung Modul
• Verwendung von CSS Anker-Positionierung Anleitung
• Leitfaden für Fallback-Optionen und bedingtes Ausblenden bei Überfluss