Position-visibility | CSS-Tricks

CSS Almanac → Properties → P → position-visibility

Juan Diego Rodríguez am 21. Aug. 2024

Die Eigenschaft position-visibility bietet bestimmte Bedingungen, um ein anker-positioniertes Element im Viewport auszublenden.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-visibility: no-overflow;
}

Die Eigenschaft position-visibility hat keine Auswirkung auf ein allgemeines Element. Dies liegt daran, dass sie Teil des CSS Anchor Positioning Moduls ist, einer Reihe von Funktionen, die zusammenarbeiten, um ein Element, das wir als „Ziel“ bezeichnen, an ein anderes, als „Anker“ bezeichnetes Element zu positionieren.

Syntax

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

Initialer Wert: anchors-visible ¹
Gilt für: absolut positionierte Elemente
Vererbt: nein
Prozentwerte: n/v
Berechneter Wert: wie angegeben
Kanonische Reihenfolge: gemäß Grammatik
Animationstyp: diskret

Werte

¹ Die Spezifikation besagt, dass der Standardwert anchors-visible ist, aber zum Zeitpunkt der Erstellung dieses Textes unterstützen Browser always als Standardwert.

always: Die Eigenschaft hat keine Auswirkung, sodass das Ziel angezeigt wird, unabhängig davon, ob sein Anker oder es selbst seinen Container überläuft.
no-overflow: Wenn das Zielelement nach Anwendung der in position-try-options definierten Positionsoptionen seinen Container immer noch überläuft, wird das Ziel stark ausgeblendet.
anchors-visible: Wenn der Anker (nicht das Ziel) seinen Container vollständig überlaufen hat oder von anderen Elementen bedeckt ist, wird das Ziel stark ausgeblendet.

Gemäß der Spezifikation gibt es den Wert anchors-valid, der das Element ausblendet, wenn eine seiner Anker-Eigenschaften (position-anchor) oder Anker-Funktionen (anchor(), anchor-size()) nicht zu einem gültigen Anker-Element aufgelöst werden kann; d. h., wenn keine passende anchor-name gefunden wird. Kein Browser hat dies jedoch zum Zeitpunkt der Erstellung dieses Textes implementiert.

Verwendung

Anker-positionierte Elemente (oder einfach Ziele) haben unweigerlich Positionierungsprobleme. Aufgrund von Bildschirmgrößenänderungen, Animationen, benachbarten Elementen und hauptsächlich Überläufen wird es nicht immer gut positioniert sein und im schlimmsten Fall vollständig verdeckt. Und trotz unserer besten Bemühungen, seine Position über die position-try-options und position-try-order zu ändern, wird es immer noch Situationen geben, in denen es besser ist, es zu verstecken, bevor es auf einer störenden Seite angezeigt wird.

In diesen Fällen können wir die Eigenschaft position-visibility verwenden, um einige Bedingungen zu definieren, die das Zielelement stark ausblenden, wenn sie erfüllt sind. Gemäß der Spezifikation bewirkt das starke Ausblenden eines Elements, dass es sich so verhält, als ob seine und die visibility aller seiner Nachkommen auf hidden gesetzt wären, unabhängig von ihrem tatsächlichen Sichtbarkeitswert.

Lassen Sie uns eine Demo einrichten, mit der wir sehen können, wie die verschiedenen Eigenschaften die Dinge beeinflussen. Zuerst können wir die .anchor und .target Elemente anordnen

<div class="anchor">anchor</div>
<div class="target">target</div>

Wir werden sie mit der Magie der Ankerpositionierung miteinander verbinden

.anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

Nun können wir unser Ziel über dem Anker positionieren, indem wir die Eigenschaft inset-area auf top setzen.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top;
}

Zuletzt platzieren wir unseren Anker in der Mitte und machen den Body größer, damit wir scrollen können.

body {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 250vh;
}

Das ist die Basis für unsere Arbeit. Jetzt fügen wir die Eigenschaft position-visibibility hinzu und spielen mit den Werten herum.

`always`

Gemäß der Spezifikation ist anchors-visible der Standardwert der Eigenschaft position-visibility, aber always ist das, was Browser implementiert haben und tatsächlich unterstützen, zumindest zum Zeitpunkt der Erstellung dieses Textes. Mit always wird das .target nicht ausgeblendet, unabhängig davon, ob sein .anchor seinen Container überläuft oder das .target-Element selbst überläuft.

`no-overflow`

Der Wert no-overflow blendet das .target aus, sobald es beginnt, außerhalb seines enthaltenden Blocks zu überlaufen.

`anchors-visible`

Die Eigenschaft anchors-visible blendet das .target-Element aus, wenn sein .anchor seinen enthaltenden Block vollständig überlaufen hat oder von anderen Elementen vollständig verdeckt ist.

Demo

Spezifikation

Die Eigenschaft position-visibility ist in der CSS Anchor Positioning Module Level 1-Spezifikation definiert, die sich zum Zeitpunkt der Erstellung dieses Textes noch im Entwurfsstadium befindet. Das bedeutet, dass sich zwischen jetzt und der formellen Kandidatenempfehlung für die Implementierung noch viel ändern kann.