Pozycjonowanie zakotwiczenia

Podczas umieszczania etykietki lub menu rozwijanego często chcesz je pozycjonować względem innego elementu na stronie. Chociaż istniały sposoby na osiągnięcie tego efektu za pomocą pozycjonowania bezwzględnego, w przypadku bardziej złożonych wymagań historycznie stosowano pozycjonowanie elementów za pomocą JavaScriptu.

Pozycjonowanie elementów za pomocą CSS umożliwia deklaratywne pozycjonowanie elementu względem innego elementu.

Elementy tetheringu

Aby element stał się kotwicą, przypisz mu wartość anchor-name w postaci dowolnego ciągu znaków rozpoczynającego się od dwóch myślników. Jest to identyfikator, którego element pozycjonowany będzie używać do znajdowania punktu zakotwiczenia. Warto nadać mu opisową nazwę. Możesz nawet przypisać elementowi kilka nazw kotwic, jeśli będzie on używany jako kotwica na różne sposoby.

Aby można było przywiązać element z określonym położeniem, musisz ustawić w nim kilka właściwości. Najpierw musisz wyciągnąć element z przepływu dokumentu, aby go „odłączyć”, ustawiając position: absolute lub position: fixed.

Następnie musisz określić, do którego punktu chcesz się przywiązać, ustawiając position-anchor na nazwę punktu, którą ustawiono w punkcie.

Na koniec musisz określić, jak umieścić punkt zakotwiczenia. Więcej informacji o position-area znajdziesz w dalszej części tego modułu.

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

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

Niejawne połączenia

Wyskakujące okienka są jeszcze łatwiejsze do powiązania. Gdy otworzysz wyskakujące okienko za pomocą przycisku z ikoną popovertarget lub ustawisz element source za pomocą elementu showPopover({source}), wyskakujące okienko będzie miało już ustawiony „niejawny element zakotwiczenia”. Wyskakujące okienko jest domyślnie pływające w position: fixed, więc aby je umieścić, wystarczy ustawić pozycję.

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

Określanie potencjalnych reklam zakotwiczonych

Pozycjonowanie elementu zakotwiczonego możesz wdrożyć w ramach komponentu, aby móc używać wzorca, np. menu, w wielu miejscach. Jeśli używasz tego samego elementu anchor-name wiele razy, jak możesz mieć pewność, że każdy element o określonym położeniu znajdzie prawidłowy punkt zakotwiczenia?

Rozwiązania w JavaScript polegają na dodaniu unikalnych identyfikatorów do każdego elementu zakotwiczenia, a następnie odwoływaniu się do nich z elementu pozycjonowanego. Jest to uciążliwe, a CSS ma prostsze rozwiązanie w postaci funkcji anchor-scope.

Właściwość anchor-scope określa, które nazwy kotwic będą dopasowywane tylko w obrębie elementu i jego elementów podrzędnych. Akceptuje listę co najmniej 1 nazwy kotwicy lub słowo kluczowe all, aby ograniczyć zakres wszystkich zdefiniowanych nazw kotwic.

Element anchor-scope najlepiej dodać do elementu nadrzędnego zarówno elementu pozycjonowanego, jak i elementu kotwicy, który nie zawiera innych elementów kotwicy o tej samej nazwie. Często znajduje się on w katalogu głównym komponentu wielokrotnego użytku.

Poniższy przykład pokazuje, jaką różnicę wprowadza element anchor-scope w przypadku powtarzających się elementów z tym samym elementem anchor-name. W tym przykładzie wszystkie elementy <img> i banery z obrazami odwołują się do nazwy kotwicy --image. Gdy atrybut anchor-scope jest stosowany do elementów <li>, atrybut position-anchor: --image będzie pasować tylko do elementu <img> w tym samym elemencie <li> co baner. W przeciwnym razie będzie pasować do ostatniego wyrenderowanego elementu <img>.

Pozycjonowanie

Po przypięciu elementu do kotwicy możesz go umieścić w odpowiednim miejscu. Pozycjonowanie elementu zakotwiczonego udostępnia 2 metody pozycjonowania: position-area i funkcję anchor().

position-area

Właściwość position-area umożliwia umieszczenie elementu wokół punktu zakotwiczenia przez określenie jednego lub dwóch słów kluczowych. Obejmuje to wiele typowych przypadków użycia i często jest dobrym punktem wyjścia.

Jak działa position-area

position-area działa poprzez utworzenie nowego bloku zawierającego dla elementu pozycjonowanego w obszarze wygenerowanym przez krawędzie elementu zakotwiczonego i pierwotnego bloku zawierającego element pozycjonowany.

Chociaż dla position-area dostępnych jest wiele słów kluczowych, można je podzielić na kilka kategorii, aby były bardziej zrozumiałe. Anchor-tool.com to świetne narzędzie do sprawdzania składni.

Fizyczne słowa kluczowe

Możesz używać klawiszy fizycznych: top, left, bottom, right i center. Na przykład position-area: top right umieści pozycjonowany element nad kotwicą i na prawo od niej. Te słowa kluczowe mają też odpowiedniki osi fizycznych: y-start, x-start, y-end i x-end.

Słowa kluczowe logiczne

Możesz też używać słów kluczowych logicznych: block-start, block-end, inline-start i inline-end. Na przykład position-area: block-end inline-start umieści element w pozycji poniżej i na lewo od elementu zakotwiczonego w językach takich jak angielski lub za elementem zakotwiczonym na osi bloku i przed elementem zakotwiczonym na osi wiersza w trybie pisania dokumentu. center można też używać ze słowem kluczowym logicznym.

Możesz też pominąć oś, jeśli określasz słowa kluczowe logiczne, najpierw oś bloku, a potem oś wiersza. position-area: start end jest taki sam jak position-area: block-start inline-end lub nawet position-area: inline-end block-start.

Obejmuje wiele obszarów siatki

Jak dotąd mogłeś/mogłaś zauważyć, że te opcje pozwalają umieścić pozycjonowany element tylko w jednym miejscu siatki. Dodanie prefiksu span do właściwości fizycznych lub logicznych powoduje dodanie sąsiedniej przestrzeni siatki środkowej. position-area: span-top right zostanie umieszczony po prawej stronie elementu zakotwiczonego, a od dołu elementu zakotwiczonego do góry oryginalnego bloku zawierającego element umieszczony.

Typowe miejsce na menu to position-area: block-end span-inline-end.

Słowo kluczowe span-all obejmuje 3 wiersze lub kolumny.

Pojedyncze słowo kluczowe

Jeśli ustawisz tylko 1 słowo kluczowe, druga oś zostanie ustawiona automatycznie. Działa to w dużej mierze zgodnie z oczekiwaniami, ale warto wiedzieć, jak to działa.

Jeśli podane słowo kluczowe jasno określa oś, druga oś jest obliczana jako span-all. Oznacza to, że position-area: bottom jest równoważne position-area: bottom span-all, a element pozycjonowany będzie znajdować się pod elementem zakotwiczenia i będzie miał do dyspozycji całą szerokość bloku zawierającego.

Jeśli jednak słowo kluczowe nie wskazuje wyraźnie osi, jest powtarzane. position-area: start jest odpowiednikiem start start i w przypadku języków pisanych od lewej do prawej jest umieszczany w lewym górnym rogu elementu zakotwiczenia.

Funkcja anchor()

W bardziej zaawansowanych przypadkach użycia position-area może nie spełniać Twoich wymagań. Funkcja anchor() umożliwia ustawianie poszczególnych właściwości wcięcia na podstawie pozycji innego elementu. Daje to długość CSS, co oznacza, że możesz używać jej w obliczeniach i z innymi funkcjami CSS. Możesz też przywiązać różne strony do różnych punktów zakotwiczenia.

Funkcja anchor() przyjmuje nazwę kotwicy i jej stronę. Jeśli element ma domyślny punkt zakotwiczenia, ustawiony za pomocą atrybutu position-anchor lub niejawnie, np. w przypadku wyskakującego okienka, możesz pominąć nazwę punktu zakotwiczenia.

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

Wartości zastępcze

Jeśli nie można znaleźć elementu zakotwiczenia dla funkcji anchor(), cała deklaracja będzie nieprawidłowa. Może się tak zdarzyć, jeśli element zakotwiczenia jest renderowany po elemencie pozycjonowanym lub jeśli nie ma elementu z pasującym atrybutem anchor-name. Aby temu zapobiec, możesz ustawić domyślną długość lub wartość procentową.

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

W powyższym przykładzie wartość atrybutu left elementu pozycjonowanego jest powiązana z wartością --focused-anchor, ale anchor-name istnieje tylko wtedy, gdy wskaźnik myszy znajduje się nad pierwszym przyciskiem lub gdy jest on zaznaczony. Ponieważ funkcja anchor() zwraca długość, możesz użyć innego elementu zakotwiczonego jako rezerwy. Gdybyśmy nie podali wartości zastępczej, element z określonym położeniem nie zostałby umieszczony w odpowiednim miejscu.

Słowa kluczowe po stronie kotwicy

Wartość parametru anchor_side określa, do której krawędzi kotwicy ma być pozycjonowany element. Podobnie jak w przypadku position-area, wartość strony kotwicy obsługuje kilka różnych typów składni.

Ten przykład pokazuje, jak wartość procentowa zawsze przechodzi od początku do końca na określonej osi:

Jak korzystać z aplikacji anchor()

Ponieważ anchor() to długość, jest bardzo elastyczna. Możesz manipulować wartością za pomocą funkcji CSS, takich jak max() i calc().

Jednym z ograniczeń jest to, że w przypadku właściwości wstawki można używać tylko funkcji anchor().

W poprzednim przykładzie dodano tło za otwartym panelem szczegółów, które jest płynnie animowane, gdy otwierany jest inny panel, i rozciąga się, aby objąć panel szczegółów, nad którym znajduje się wskaźnik. W tym celu używa funkcji min(), aby wybrać mniejszą długość między dwoma punktami zakotwiczenia.

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

W przykładzie użyto też znaku calc(), aby dodać odstęp w linii wokół otwartego panelu.

Używanie rozmiaru elementu zakotwiczonego

Możesz też użyć funkcji anchor-size(), aby użyć wymiarów elementu zakotwiczonego do określenia rozmiaru, pozycji lub marginesu elementu pozycjonowanego.

anchor-size() przyjmuje nazwę kotwicy lub używa domyślnej kotwicy. Domyślnie używa rozmiaru elementu zakotwiczonego na osi, na której jest używany, więc width: anchor-size() zwróci szerokość elementu zakotwiczonego. Możesz też użyć drugiej osi, określając, jakiej długości mają być słowa kluczowe, za pomocą słów kluczowych fizycznych width i height lub słów kluczowych logicznych block, inline, self-block i self-inline.

Obsługa przepełnienia

Masz komponent menu, w którym używasz pozycjonowania względem punktu zakotwiczenia, aby umieścić menu w odpowiednim miejscu. Następnie przenosisz menu na drugą stronę ekranu lub używasz go w menu użytkownika, a nazwa użytkownika jest bardzo długa. Nagle menu rozwijane znika z ekranu. Co dalej?

Pozycjonowanie elementów zakotwiczonych w CSS ma wbudowany system, który umożliwia szybkie tworzenie niezawodnego zestawu rezerwowych rozwiązań, gdy pozycjonowany element znajdzie się poza blokiem zawierającym.

Opcje zastępcze

Reguła position-try-fallbacks przyjmuje listę opcji rezerwowych. Gdy domyślna pozycja jest zbyt mała, każda opcja jest wypróbowywana po kolei, dopóki nie znajdzie się pozycja, która nie jest zbyt mała.

Jako opcji zastępczej możesz użyć dowolnej wartości position-area. W tym przykładzie w trybach pisania od lewej do prawej, takich jak język angielski, element pozycjonowany będzie próbował być umieszczony u dołu elementu zakotwiczonego, obejmując środkową i prawą kolumnę. Jeśli się nie zmieści, spróbuje się umieścić u dołu elementu zakotwiczonego, obejmując lewą i środkową kolumnę. Jeśli to też spowoduje przepełnienie, pozycja zostanie przywrócona do domyślnej, nawet jeśli to też spowoduje przepełnienie.

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

Istnieje też kilka słów kluczowych flip-, które obsługują typowe przypadki rezerwowe. flip-block i flip-inline próbują odwrócić element względem osi blokowej i wierszowej. Można je też łączyć z flip-block flip-inline, aby odwrócić obraz w obu osiach. Wartość flip-start odwraca pozycjonowany element wzdłuż linii ukośnej od początkowego do końcowego rogu elementu zakotwiczonego.

Możesz też utworzyć niestandardową opcję rezerwową za pomocą @position-try – pozwala to ustawić marginesy, wyrównanie, a nawet zmienić punkt zakotwiczenia.

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

Do opcji zastępczych @position-try można dodać flip-block i flip-inline, aby utworzyć wariant.

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

W powyższym przykładzie przeglądarka wykonuje te czynności, zatrzymując się, gdy tylko znajdzie rozwiązanie, które nie powoduje przepełnienia.

1. Element jest umieszczony w position-area: end, w prawym dolnym rogu kotwicy.
2. Jeśli to się nie zmieści, element zostanie umieszczony z użyciem niestandardowej opcji rezerwowej o nazwie --bottom-span-right, która umieszcza go z użyciem position-area: bottom span-right i dodatkowego marginesu poniżej.
3. Jeśli to się nie zmieści, element zostanie umieszczony za pomocą wartości flip-inline --bottom-span-right, która łączy niestandardową opcję rezerwową z wartością flip-inline, czyli w zasadzie position-area: bottom span-left.
4. Jeśli element nie mieści się w tym miejscu, jest umieszczany przy użyciu --use-alternate niestandardowej opcji rezerwowej, która umieszcza go poniżej zupełnie innego elementu zakotwiczenia.
5. Jeśli to spowoduje przepełnienie, element powróci do pierwotnego położenia z wartością position-area: end, mimo że wiadomo, że to spowoduje przepełnienie.

Kolejność zastępcza

Domyślnie, gdy początkowa pozycja powoduje przepełnienie, przeglądarka wypróbowuje każdą opcję w position-try-fallbacks, aż znajdzie pozycję, która nie powoduje przepełnienia. Możesz zmienić ten sposób działania za pomocą funkcji position-try-order, aby przetestować każdą opcję rezerwową i użyć tej, która ma najwięcej miejsca na określonej osi.

Oś możesz określić za pomocą słów kluczowych logicznych most-block-size i most-inline-size lub słów kluczowych fizycznych most-height i most-width.

position-try-order i position-try-fallbacks można połączyć ze skrótem position-try, przy czym skrót ten musi być podany jako pierwszy.

Przewijanie

Gdy użytkownik przewija stronę, oczekuje, że będzie się ona płynnie przesuwać. W tym celu przeglądarki mają ograniczenia dotyczące sposobu używania pozycjonowania elementu zakotwiczonego podczas przewijania.

Możesz powiązać element z pozycjonowaniem z kotwicami w różnych kontenerach przewijania, ale element będzie się przesuwać tylko w odpowiedzi na przewijanie jednej z kotwic. Będzie to domyślny element zakotwiczenia, czyli element zakotwiczenia domyślnego z wyskakującego okienka lub wartość parametru position-anchor.

Zauważysz, że element z określonym położeniem pozostaje widoczny nawet wtedy, gdy element zakotwiczenia zostanie przewinięty poza widok. Aby ukryć element pozycjonowany, gdy element zakotwiczenia jest ukryty, ustaw wartość position-visibility: anchors-visible. Dotyczy to nie tylko sytuacji, gdy element docelowy jest przewinięty, ale także gdy jest ukryty w inny sposób, np. za pomocą visibility: hidden.

Sprawdź swoją wiedzę