Umístění kotvy CSS: Popisek a rozbalovací nabídka bez JavaScriptu
Vytvoření popisku v JavaScriptu znamená napsat kód pro výpočet pozice prvku vzhledem k jeho spouštěči, aktualizovat tuto pozici při změně velikosti a posouvání, zpracovat případy okrajů, když tip skončí mimo výřez, a to vše udělat bez zavedení mlácení rozvržení. Není to složité, ale je to opakující se kód, který každý znovuobjevuje aplikaci od začátku.
La CSS Anchor Positioning API řeší tento problém pomocí čistého CSS a deklarativní. S podporou prohlížeče86 % celosvětově do začátku roku 2026 (Chrome 125+, Edge 125+, Chrome pro Android, Safari Technology Preview), tato technika je vyzrálá pro produkci na stránkách, které podporují moderní prohlížeče. Umožňuje "ukotvit" jeden prvek k druhému jako referenční bod pro umístění, s automatickými zálohami, pokud není dostatek místa.
Co se naučíte
- Základní pojmy CSS Anchor Positioning: kotva, umístěný prvek
- Vlastnosti
anchor-nameeposition-anchor - Funkce
anchor()pro relativní umístění - Jak implementovat popisky, rozevírací seznamy a kontextové nabídky v čistém CSS
- Automatické záložní s
position-try-fallbacks - Jak se integrovat s Popover API pro plnou dostupnost
- Progresivní vylepšení pro prohlížeče bez podpory
Základní pojmy
CSS Anchor Positioning zavádí dvě role:
-
L'kotevní prvek (kotevní prvek): Prvek, ke kterému kotvíme.
Dostává majetek
anchor-names hodnotou vlastního identifikátoru (předpona--). -
Il umístěný prvek (umístěný prvek): prvek, který chceme
polohu vzhledem ke kotvě. Musí mít
position: absoluteoposition: fixeda přijímáposition-anchorpro připojení ke kotvě.
/* 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%);
}Funkce anchor().
Funkce anchor() převede na souřadnici vzhledem k hraně
určená kotva prvku. Dostupné hodnoty jsou:
anchor(top): horní okraj kotvyanchor(bottom): spodní okraj kotvyanchor(left): levý okraj kotvyanchor(right): pravý okraj kotvyanchor(center): horizontální střed kotvyanchor(middle): vertikální střed kotvyanchor(self-start),anchor(self-end): souvisí se směrem textu
/* 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(): Rozměry vzhledem ke kotvě
Kromě funkce anchor() pro souřadnice, anchor-size()
umožňuje znovu přistupovat k rozměrům prvku:
/* 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);
}Accessible Tooltip: CSS Anchor + Popover API
Optimální kombinace pro popisky dostupné v roce 2026 a CSS Anchor Positioning s Popover API. Popover API se automaticky stará o správu fokusu, zavření kliknutím zvenčí a dostupností ARIA. Umístění kotvy CSS řídí vizuální polohování.
<!-- 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;
}Rozbalovací Úplná nabídka
Úplnější příklad: rozbalovací nabídka z tlačítka „Akce“ s kotvou CSS Positioning and Popover API pro přístupnou správu fokusu:
<!-- 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;
}Automatické nouzová nastavení s nouzovými hlášeními o pozici
Jedním z nejobtížnějších problémů s popisky a rozevíracími seznamy je řešení případů, kdy není dostatek místa: nápověda, která končí mimo horní výřez nebo na levé straně se musí automaticky přemístit.
CSS Anchor Positioning to řeší pomocí position-try-fallbacks, to
určuje seznam alternativních umístění, která prohlížeč postupně 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;
}Progresivní vylepšování pro prohlížeče bez podpory
Pro prohlížeče, které ještě nepodporují CSS Anchor Positioning (stabilní Firefox
od začátku roku 2026 jej ještě nepodporuje), používá @supports pro
poskytnout záložní:
/* 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: Stále omezená podpora
Počátkem roku 2026 Firefox ještě nepodporuje CSS Anchor Positioning v
stabilní verze (a v aktivním vývoji). To znamená, že 20-25 %.
Uživatelé stolních počítačů ve Firefoxu uvidí tuto možnost. USA @supports pro
zajistit, aby byl zážitek vždy funkční, a to i bez umístění kotvy.
Další kroky
Nyní máte popisky a deklarativní rozevírací seznamy v čistém CSS. Další článek z série zkoumá rozhraní View Transitions API: Jak implementovat plynulé animace nativní navigace v prohlížeči, a to jak pro jednostránkové aplikace, tak pro Vícestránkové aplikace bez knihoven třetích stran.
Závěry
CSS Anchor Positioning je jedním z nejočekávanějších přírůstků do jazyka CSS posledních letech. Eliminuje celou kategorii kódu JavaScript — ruční výpočet polohovacích souřadnic – nahrazení deklarativními CSS, které prohlížeč zvládá nativně, včetně automatických nouzových záloh a aktualizace posouvat a měnit velikost.
Díky podpoře pro 86 % globálních prohlížečů si to již můžete osvojit jako vylepšení progresivní, což zajišťuje, že starší prohlížeče mají stále zkušenosti funkční. Kombinace s Popover API pro správu přístupnosti představuje moderní a kompletní zásobník pro vytváření překryvných uživatelských rozhraní v roce 2026.