Pozycjonowanie kotwic CSS: podpowiedź i menu rozwijane bez JavaScript
Tworzenie podpowiedzi w JavaScript oznacza pisanie kodu w celu obliczenia pozycji elementu względem jego wyzwalacza, zaktualizuj tę pozycję przy zmianie rozmiaru i przewijaniu, obsługuj przypadki Edge, gdy podpowiedź kończy się poza rzutnią, i rób to wszystko bez wprowadzania miażdżenia układu. Nie jest to skomplikowane, ale jest to powtarzalny kod, który każdy wymyśla aplikację od podstaw.
La API pozycjonowania kotwic CSS rozwiązuje ten problem za pomocą czystego CSS i deklaratywny. Z obsługą przeglądarki86% na całym świecie do początku 2026 r (Chrome 125+, Edge 125+, Chrome na Androida, wersja zapoznawcza technologii Safari), technika ta jest dojrzała do produkcji w witrynach obsługujących nowoczesne przeglądarki. Pozwala do „zakotwiczenia” jednego elementu do drugiego jako punkt odniesienia do pozycjonowania, z automatycznymi funkcjami awaryjnymi, jeśli nie ma wystarczającej ilości miejsca.
Czego się nauczysz
- Podstawowe pojęcia pozycjonowania kotwic CSS: kotwica, element pozycjonowany
- Właściwości
anchor-nameeposition-anchor - Funkcja
anchor()do względnego pozycjonowania - Jak zaimplementować podpowiedzi, menu rozwijane i menu kontekstowe w czystym CSS
- Automatyczne powroty z
position-try-fallbacks - Jak zintegrować się z Popover API dla pełnej dostępności
- Stopniowe ulepszanie przeglądarek bez wsparcia
Podstawowe pojęcia
Pozycjonowanie kotwic CSS wprowadza dwie role:
-
L'element kotwiący (element kotwicy): Element, do którego się zakotwiczamy.
Otrzymuje majątek
anchor-namez niestandardową wartością identyfikatora (przedrostek--). -
Il pozycjonowany element (element pozycjonowany): element, który chcemy
położenie względem kotwicy. Musi mieć
position: absoluteoposition: fixedi odbieraposition-anchordo połączenia z kotwicą.
/* 1. Definisci l'ancora */
.button-trigger {
anchor-name: --tooltip-anchor;
}
/* 2. Posiziona l'elemento relativamente all'ancora */
.tooltip {
position: absolute;
/* Collega questo elemento all'ancora */
position-anchor: --tooltip-anchor;
/* Posizionamento usando la funzione anchor() */
/* anchor(bottom) = il bordo bottom dell'ancora */
top: calc(anchor(bottom) + 8px);
/* Centra orizzontalmente rispetto all'ancora */
left: anchor(center);
transform: translateX(-50%);
}Funkcja kotwicy().
Funkcja anchor() rozkłada się na współrzędną względem krawędzi
kotwica określonego elementu. Dostępne wartości to:
anchor(top): górna krawędź kotwyanchor(bottom): dolna krawędź kotwyanchor(left): lewa krawędź kotwicyanchor(right): prawa krawędź kotwicyanchor(center): poziomy środek kotwicyanchor(middle): pionowy środek kotwicyanchor(self-start),anchor(self-end): związany z kierunkiem tekstu
/* Tooltip sopra il trigger */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: calc(anchor(top) - 8px);
left: anchor(center);
transform: translateX(-50%);
}
/* Tooltip a destra del trigger */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
top: anchor(center);
left: calc(anchor(right) + 8px);
transform: translateY(-50%);
}
/* Dropdown sotto il trigger - allineato a sinistra */
.dropdown {
position: absolute;
position-anchor: --dropdown-anchor;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
min-width: anchor-size(width); /* larghezza minima = larghezza dell'ancora */
}Anchor-size(): Wymiary względem kotwicy
Oprócz funkcji anchor() dla współrzędnych, anchor-size()
umożliwia ponowny dostęp do wymiarów elementu:
/* Il dropdown ha la stessa larghezza del trigger */
.dropdown {
min-width: anchor-size(width);
/* Altezza massima pari al 50% dell'altezza dell'ancora */
max-height: calc(anchor-size(height) * 0.5);
}Dostępna etykietka narzędzia: Kotwica CSS + API Popover
Optymalna kombinacja podpowiedzi dostępnych w 2026 r. i pozycjonowania kotwic CSS z interfejsem API Popover. Popover API automatycznie obsługuje zarządzanie fokusami, kliknięcie na zewnątrz, aby zamknąć, oraz dostępność ARIA. Pozycjonowanie kotwic CSS zarządza pozycjonowaniem wizualnym.
<!-- HTML: Popover API + Anchor Positioning -->
<button
popovertarget="tooltip-content"
class="btn-with-tooltip"
>
Hover per info
</button>
<div
id="tooltip-content"
popover="hint"
class="tooltip"
role="tooltip"
>
Informazione contestuale utile all'utente
</div>/* CSS: Anchor + Popover */
.btn-with-tooltip {
anchor-name: --btn-anchor;
}
.tooltip {
/* Stili base del tooltip */
position: absolute;
position-anchor: --btn-anchor;
/* Posiziona sotto il pulsante */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Reset stili popover */
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.875rem;
max-width: 280px;
width: max-content;
/* Animazione di entrata */
opacity: 0;
transition: opacity 0.15s ease;
/* Stato visibile (Popover API) */
&:popover-open {
opacity: 1;
}
}
/* Freccia del tooltip */
.tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #e2e8f0;
}
.tooltip::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: white;
}Pełne menu rozwijane
Pełniejszy przykład: menu rozwijane z przycisku „Akcje” z kotwicą CSS Pozycjonowanie i Popover API do zarządzania dostępnymi fokusami:
<!-- Bottone trigger -->
<button
class="actions-btn"
popovertarget="actions-menu"
aria-haspopup="true"
>
Azioni ▼
</button>
<!-- Menu dropdown -->
<menu
id="actions-menu"
popover="auto"
class="dropdown-menu"
>
<li><button>Modifica</button></li>
<li><button>Duplica</button></li>
<li class="separator"></li>
<li><button class="danger">Elimina</button></li>
</menu>/* CSS del dropdown */
.actions-btn {
anchor-name: --actions-anchor;
}
.dropdown-menu {
position: absolute;
position-anchor: --actions-anchor;
/* Allinea il bordo sinistro del menu con il pulsante */
top: calc(anchor(bottom) + 4px);
left: anchor(left);
/* Larghezza minima pari al pulsante */
min-width: anchor-size(width);
/* Reset stili menu */
margin: 0;
padding: 4px 0;
list-style: none;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Animazione */
opacity: 0;
scale: 0.95;
transform-origin: top left;
transition: opacity 0.15s, scale 0.15s;
&:popover-open {
opacity: 1;
scale: 1;
}
}
.dropdown-menu li button {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem;
&:hover {
background: #f8fafc;
}
&.danger {
color: #ef4444;
}
}
.dropdown-menu .separator {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}Automatyczne awarie z próbą powrotu do pozycji
Jednym z najbardziej uciążliwych problemów z podpowiedziami i listami rozwijanymi jest radzenie sobie z przypadkami, w których nie ma wystarczającej ilości miejsca: podpowiedź, która kończy się poza górnym rzutnią lub po lewej stronie musi zostać automatycznie przesunięta.
Pozycjonowanie kotwic CSS rozwiązuje ten problem za pomocą position-try-fallbacks, to
określa listę alternatywnych miejsc docelowych, które przeglądarka sekwencyjnie testuje:
/* Definisci i posizionamenti alternativi */
@position-try --below {
top: calc(anchor(bottom) + 8px);
bottom: auto;
left: anchor(center);
right: auto;
}
@position-try --above {
top: auto;
bottom: calc(anchor(top) + 8px);
left: anchor(center);
right: auto;
}
@position-try --right {
top: anchor(center);
left: calc(anchor(right) + 8px);
right: auto;
bottom: auto;
}
@position-try --left {
top: anchor(center);
right: calc(anchor(left) + 8px);
left: auto;
bottom: auto;
}
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Posizionamento default: sotto */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Fallback: prova prima sopra, poi destra, poi sinistra */
position-try-fallbacks: --above, --right, --left;
/* Fallback finale: usa la prima opzione disponibile nel viewport */
position-try-order: most-block-size;
}Stopniowe ulepszanie przeglądarek bez wsparcia
W przypadku przeglądarek, które nie obsługują jeszcze pozycjonowania kotwic CSS (wersja stabilna dla przeglądarki Firefox).
nie obsługuje go jeszcze na początku 2026 r.), używa @supports dla
zapewnić rozwiązanie awaryjne:
/* Fallback: tooltip sempre visibile o con JS */
.tooltip {
/* Stili di default accessibili: mostro un title attribute */
display: none; /* nascosto, gestito da JS fallback */
}
/* Se il browser supporta anchor positioning: CSS puro */
@supports (anchor-name: --test) {
.trigger {
anchor-name: --my-anchor;
}
.tooltip {
display: block; /* visibile, gestito da CSS */
position: absolute;
position-anchor: --my-anchor;
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Nascosto di default, mostrato su hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.trigger:hover + .tooltip,
.trigger:focus + .tooltip {
opacity: 1;
pointer-events: auto;
}
}
/* JavaScript fallback per browser legacy */
if (!CSS.supports('anchor-name', '--test')) {
// Import libreria JS per tooltip
import('./tooltip-fallback.js').then(module => module.init());
}Firefox: nadal ograniczone wsparcie
Od początku 2026 roku Firefox nie obsługuje jeszcze pozycjonowania kotwic CSS w plikach
wersja stabilna (i aktywnie rozwijana). Oznacza to, że 20-25 proc
Użytkownicy komputerów stacjonarnych korzystający z przeglądarki Firefox zobaczą wersję awaryjną. USA @supports dla
upewnij się, że doświadczenie jest zawsze funkcjonalne, nawet bez pozycjonowania kotwicy.
Następne kroki
Masz teraz podpowiedzi i deklaratywne listy rozwijane w czystym CSS. Kolejny artykuł pt seria bada interfejs API przejść widoków: jak wdrożyć płynne animacje natywna nawigacja w przeglądarce, zarówno dla aplikacji jednostronicowych, jak i dla Aplikacje wielostronicowe, bez bibliotek innych firm.
Wnioski
Pozycjonowanie kotwic CSS to jeden z najbardziej oczekiwanych dodatków do języka CSS ostatnie lata. Eliminuje całą kategorię kodu JavaScript — obliczenia ręczne współrzędnych pozycjonowania — zastępując je deklaratywnym CSS, który przeglądarka obsługuje natywnie, włączając automatyczne przywracanie i aktualizację przewijaj i zmieniaj rozmiar.
Dzięki obsłudze 86% przeglądarek na całym świecie możesz już zastosować to jako ulepszenie progresywny, dzięki czemu starsze przeglądarki nadal będą działać funkcjonalny. Połączenie z Popover API do zarządzania dostępnością reprezentuje nowoczesny i kompletny stos do tworzenia nakładek interfejsu użytkownika w roku 2026.