Noch eine Ankerpositionierungs -Quirk

CSS -Ankerpositionierung: Eine überraschende Funktion, aber es gibt einige schwierige Probleme. Während kein Game-Changer wie Flexbox oder Grid, füllt es die Lücke in der CSS-Positionierung jahrzehntelang. Es hat jedoch auch einige einzigartige Eigenschaften, die zu einem rätselhaften Verhalten führen. In diesem Artikel wird ein Ankerpositionierungsproblem untersucht, das mich lange Zeit beunruhigt hat.

Origin

Ich habe dieses Problem vor einem Monat entdeckt, als ich den Fall eines anderen Ankerpositionierung gelesen habe, insbesondere Temani AFIFs Artikel über "Ankerpositionierung und scrollengetriebene Animation". Wir empfehlen dringend, diesen Artikel zu lesen, um zu sehen, was meine Aufmerksamkeit erregt hat. Er kombiniert geschickt die Ankerpositionierung und scrollengetriebene Animationen, um einen Reichweite zu erstellen, der auch die Farbe ändert, wenn sich der Fortschritt ändert.

Was noch erstaunlicher ist, ist, dass er zwei Zielelemente mit demselben Ankernamen verwendet, wobei jedes Element wie Magie an seinen entsprechenden Ankerpunkt angehängt ist. Wenn dies nicht so interessant erscheint, sollten wir kurz überprüfen, wie die Ankerpositionierung funktioniert.

CSS-Ankerpositionierung und Anker-Scope-Attribut

Weitere Informationen finden Sie in unserem vollständigen CSS-Ankerpositionierungshandbuch für ein umfassenderes Verständnis.

Ankerpositionierung bringt zwei neue Konzepte zu CSS: Ankerpunkt Element und Ziel Element. Ein Anker ist ein Referenzelement, das zur Lokalisierung anderer Elemente verwendet wird. Das Zielelement ist ein Element, das relativ zu einem oder mehreren Ankerpunkten absolut positioniert ist.

Anker und Ziele können fast jedes Element sein, Sie können sie als zwei Divs nebeneinander betrachten:

<code><div>anchor</div>
<div>target</div></code>

Zunächst müssen wir das Ankerelement in CSS mit dem Attribut anchor-name registrieren:

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

Verwenden Sie dann das Attribut position-anchor auf dem absolut positionierten Element, um es mit demselben Namen an einen Ankerpunkt anzuhängen. Um das Ziel jedoch um den Ankerpunkt zu bewegen, benötigen wir das position-area Attribut.

<code>.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}</code>

Dies funktioniert gut, aber wenn wir den Marker so ändern, dass mehr Anker und Ziele einbezogen werden, wird die Situation kompliziert:

<code></code>

• veranker 1
  Ziel 1
• verankert 2
  Ziel 2
• veranker 3
  Ziel 3

Das Zielelement ist nicht an seinen nächsten Ankerpunkt beigefügt, sondern am letzten registrierten Ankerpunkt in der DOM aufgestockt.

Das

anchor-scope Attribut wurde in Chrom 131 eingeführt, um dieses Problem zu lösen. Es begrenzt den Umfang der Ankerpunkte auf Unterbaum, so dass jedes Ziel ordnungsgemäß angeschlossen ist. Ich möchte jedoch nicht auf diese Immobilie achten, denn was meine Aufmerksamkeit anfänglich auf sich zog, war, dass Temani es nicht verwendet hat. Aus irgendeinem Grund sind alle Ziele richtig angeschlossen, wieder wie Magie.

Was ist passiert?

Das

-Ziel ist normalerweise am letzten Anker im DOM angeschlossen, nicht an seinem nächsten Anker, aber in unserem ersten Beispiel sehen wir zwei Anker mit demselben

und ihren entsprechenden zusätzlichen Zielen. All dies verwendet nicht das anchor-name Attribut. was ist passiert? anchor-scope

Zwei Wörter:

enthält Block .

Es ist über die Ankerpositionierung zu beachten, dass sie in hohem Maße davon abhängt, wie Elemente Blöcke enthalten sind. Dies ist kein inhärentes Merkmal der Ankerpositionierung selbst, sondern ein absolutes Positionierungsmerkmal. Ein absolut positioniertes Element ist relativ zu seinem Eindämmungsblock positioniert, während Randattribute wie

, top: 0px oder left: 30px einfach Elemente um die Grenze des enthaltenden Blocks bewegen und den sogenannten inset: 1rem modifizierten Einschlussblock erstellen.

Das an den Anker angebrachte Ziel ist nicht anders.

position-area Normalerweise ist der enthaltende Block eines absoluten Positionierungselements das gesamte Ansichtsfenster, kann jedoch durch jedes Positionsattribut geändert werden, das nicht das Vorfahren von

ist (normalerweise

). Temani nutzt diese Tatsache, um einen neuen Block für jeden Schieberegler zu erstellen, damit sie nur an ihre entsprechenden Ankerpunkte angeschlossen werden können. Wenn Sie sich den Code ansehen, finden Sie ihn zu Beginn: static relative

Wenn wir diese Strategie im vorherigen Beispiel anwenden, werden sie plötzlich richtig angeschlossen!

<code><div>anchor</div>
<div>target</div></code>

Eine andere Frage

, anstatt das Attribut

zu verwenden, um jeden Anker an sein jeweiliges Ziel anzuhängen, nutzen wir die Berechnung des enthaltenden Blocks absoluter Elemente. Es gibt jedoch einen anderen Weg, ohne zusätzlichen Code erforderlich.

anchor-scope Ich habe dies entdeckt, als ich gleichzeitig mit Scroll -Antriebsanimation und Ankerpositionierung experimentiert habe und versuchte, eine Textblasen Fußnote an der Seite des Pfostens zu befestigen, wie SO:

logischerweise ist jede Fußnote ein Ziel, aber die Wahl der Ankerpunkte ist etwas schwierig. Ich dachte zunächst, jeder Absatz könnte als Anker verwendet werden, aber das bedeutet, dass es mehrere Anker mit demselben

geben wird. Ergebnis: Alle Ziele werden am letzten Anker gestapelt:

anchor-name Dies kann durch unsere vorherige Methode zum Erstellen eines neuen Blocks für jeden Kommentar gelöst werden. Wir können jedoch einen anderen Ansatz verfolgen, den ich den reduktionistischen Ansatz bezeichne. Das Problem tritt auf, wenn es mehrere Anker mit demselben

gibt. Daher reduzieren wir die Anzahl der Anker auf eins, wobei ein Element verwendet wird, das für alle Ziele ein gemeinsamer Anker sein kann.

In diesem Fall möchten wir jedes Ziel nur auf beiden Seiten des Post

Sie können besser überprüfen, wie der ursprüngliche Beitrag gemacht wurde!

Schlussfolgerung

Wahrscheinlich eine kürzlich an den Browser veröffentlichte CSS -Eigenschaft (bisher nur in Chrome 131), daher können wir nicht erwarten, dass seine Unterstützung die Erwartungen übersteigt. Während ich es gerne jederzeit und überall benutzen würde, bleibt es für eine Weile auf kurze Demos beschränkt. Dies ist kein Grund, die Verwendung anderer Ankerpositionierungseigenschaften zu begrenzen, die in Chrome 125 und später (und hoffentlich in naher Zukunft in anderen Browsern) unterstützt werden. Ich hoffe, dass diese kleinen Probleme Ihnen dabei helfen können, weiterhin ohne Sorgen um die Ankerpositionierung zu verwenden. anchor-scope

Das obige ist der detaillierte Inhalt vonNoch eine Ankerpositionierungs -Quirk. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!