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 anker-positioniertes Element bedingt zu verstecken, abhängig davon, ob es beispielsweise sein enthaltendes Element oder den Viewport ü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, entweder weil er sein enthaltendes Element (oder den Viewport) überläuft oder von anderen Elementen überdeckt wird, wird das positionierte Element stark verborgen.
no-overflow-
Wenn das positionierte Element beginnt, sein enthaltendes Element oder den Viewport zu überlaufen, wird es stark verborgen.
Die Spezifikation definiert auch den anchors-valid Wert, welcher noch in keinem Browser implementiert wurde.
Beschreibung
In einigen Situationen möchten Sie möglicherweise kein anker-positioniertes Element anzeigen. Zum Beispiel, wenn sein zugehöriger Anker vom Bildschirm gescrollt wurde, das anker-positionierte Element jedoch sonst noch teilweise oder vollständig sichtbar wäre, könnte es unklar sein, worauf es sich bezieht und nimmt unnötig Platz ein. In einem solchen Fall möchten Sie es möglicherweise vollständig verbergen.
Die position-visibility Eigenschaft kann verwendet werden, um das anker-positionierte Element always anzuzeigen oder bedingt zu verstecken, wenn das zugehörige Ankerelement vollständig verborgen ist (anchors-visible) oder wenn das anker-positionierte Element selbst teilweise versteckt ist (no-overflow).
Wenn ein Element aufgrund von position-visibility versteckt wird, wird es als stark verborgen bezeichnet. Das bedeutet, dass es so wirkt, als hätten es und seine Nachfahrenelemente einen visibility Wert von hidden gesetzt, 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 zu verbergen. In den meisten Fällen ergibt es mehr Sinn, zu versuchen, die Platzierung von positionierten Elementen zu ändern, wenn sie beginnen überzulaufen, um sie auf dem Bildschirm und nutzbar zu halten. Dies kann mit der position-try-fallbacks Eigenschaft und der @position-try Regel erreicht werden. Siehe den Rückfalloptionen und bedingtes Verbergen bei Überlauf Leitfaden 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 Verwendung
Dieses Beispiel ermöglicht es, den Wert einer anker-positionierten Eigenschaft position-visibility zu ändern, um die Auswirkungen jedes Wertes zu demonstrieren.
HTML
Wir spezifizieren zwei <div> Elemente; ein Ankerelement mit der Klasse anchor und ein positioniertes Element mit der Klasse infobox.
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
Das HTML enthält auch Fülltexte, um den Inhalt größer als den Viewport zu machen, sodass Scrollen erforderlich ist. Wir haben auch ein <fieldset> mit einer Gruppe von Radio-Inputs mit verschiedenen position-visibility Werten eingeschlossen. Das Markup für diese wird der Kürze halber nicht gezeigt.
CSS
Wir stylen ein anchor <div> als Ankerelement und verankern das infobox <div> daran. Der 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 hinzu, um bei der Auswahl eines neuen Wertes den position-visibility Eigenschaftswert der Infobox zu 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 unterschiedliche position-visibility Werte und scrollen Sie dann die Seite hoch und runter, um deren Auswirkungen zu sehen. Mit position-visibility: always wird das positionierte Element nicht versteckt. Mit position-visibility: anchors-visible wird das positionierte Element nur sichtbar sein, wenn der Anker teilweise oder vollständig auf dem Bildschirm ist. Mit position-visibility: no-overflow wird das positionierte Element versteckt, sobald es beginnt, den Viewport zu überlaufen.
Spezifikationen
| Specification |
|---|
| CSS Anchor Positioning # position-visibility |
Browser-Kompatibilität
Loading…