position-visibility
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die position-visibility CSS 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 Wert anchors-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 Eigenschaft position-visibility kann verwendet werden, um das verankerungs-positionierte Element always 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 von position-visibility verborgen wird, wird es als stark verborgen bezeichnet. Dies bedeutet, dass es so behandelt wird, als ob es und seine Nachkommelelemente den visibility Wert hidden 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 der position-try-fallbacks Eigenschaft und der @position-try At-Regel erreicht werden. Siehe den Leitfaden für Fallback-Optionen und bedingtes Ausblenden bei Überfluss für weitere Informationen.
Formale Definition
| Anfangswert | anchors-visible |
|---|---|
| Anwendbar auf | absolut positionierte Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
position-visibility =
always |
[ anchors-valid || anchors-visible || no-overflow ]
Beispiele
Grundlegende Nutzung
In diesem Beispiel wird das Ändern des Wertes der Property position-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 von anchor und ein positioniertes Element mit einer Klasse von infobox.
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
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 von Radio-Eingaben mit unterschiedlichen position-visibility Werten hinzugefügt. Die Markup für diese wird aus Gründen der Kürze nicht gezeigt.
CSS
Wir gestalten ein anchor <div> als Ankerelement und verbinden das infobox <div> damit. Das relevante CSS ist wie folgt:
.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 einen change Ereignishandler auf den Radio-Buttons hinzu, so dass, wenn ein neuer Wert ausgewählt wird, wir den Wert der position-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 verschiedene position-visibility Werte aus und scrollen Sie dann die Seite nach oben und unten, um deren Effekte zu sehen. Mit position-visibility: always wird das positionierte Element nicht verborgen. Mit position-visibility: anchors-visible wird das positionierte Element nur sichtbar, wenn der Anker teilweise oder vollständig auf dem Bildschirm ist. Mit position-visibility: no-overflow wird das positionierte Element ausgeblendet, sobald es beginnt, das Ansichtsfenster zu überlaufen.
Spezifikationen
| Specification |
|---|
| CSS Anchor Positioning # position-visibility |