CSS Anchor Positioning – posicování elementů relativně k jiným

CSS Anchor Positioning je nová CSS funkce, která umožňuje posicovat elementy relativně k jiným elementům bez nutnosti JavaScriptu nebo složitých výpočtů. Hodí se pro tooltipy, popovery, kontextové nabídky, spojovací čáry mezi prvky a další UI vzory.

Základní princip

Anchor positioning zavádí tři klíčové části:

• anchor-name – označí element jako referenční bod (kotvu)
• position-anchor – propojí posicovaný element s kotvou
• anchor() – funkce vracející posici hrany kotvy

Základní příklad

Kotvu definujeme pomocí anchor-name s vlastním identifikátorem (jako CSS proměnná, začíná --):

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

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  top: anchor(bottom);
  left: anchor(center);
}

Tooltip se automaticky umístí pod tlačítko a vycentruje se vůči němu. Hodnota anchor(bottom) vrací posici spodní hrany kotvy, anchor(center) vrací střed.

Funkce anchor()

Funkce anchor() vrací posici hrany kotvy. Syntaxe:

anchor(<anchor-name> <anchor-side>, <fallback>)

• anchor-name – identifikátor kotvy, volitelný pokud je nastaveno position-anchor
• anchor-side – top, right, bottom, left, center, start, end, nebo procenta (0%–100%)
• fallback – záložní hodnota, pokud kotva neexistuje (volitelné)

Mezi názvem kotvy a stranou je mezera, před fallbackem je čárka:

.popup {
  position: absolute;
  top: anchor(--menu-item bottom, 50%);
  left: anchor(--menu-item left);
}

Posicování k více kotvám

Element lze posicovat relativně k více kotvám současně. Každá vlastnost může odkazovat na jinou kotvu:

.connector {
  position: absolute;
  top: anchor(--start center);
  left: anchor(--start right);
  bottom: anchor(--end top);
  right: anchor(--end center);
  border: 2px solid gray;
  border-bottom: none;
  border-left: none;
}

Tímto způsobem lze vytvářet spojovací čáry mezi prvky bez JavaScriptu.

Spojovací čára (.conn-line) se automaticky přizpůsobí posici obou boxů. Stačí změnit posici kteréhokoli z nich a čára se překreslí.

Omezení scope pomocí anchor-scope

Vlastnost anchor-scope omezuje, které elementy mohou kotvu používat. Užitečné pro komponenty s více instancemi:

.card {
  anchor-scope: --card-anchor;
}

.card .trigger {
  anchor-name: --card-anchor;
}

.card .dropdown {
  position-anchor: --card-anchor;
}

Každá karta má vlastní kotvu, kterou vidí pouze její potomci.

Zjednodušení pomocí position-area

Vlastnost position-area umožňuje umístit element do jedné z devíti oblastí kolem kotvy:

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  position-area: block-end center;
}

Možné hodnoty zahrnují kombinace block-start, block-end, inline-start, inline-end, center, top, bottom, left, right.

Fallback posice

Pokud se tooltip nevejde do viewportu, lze definovat záložní posice:

.tooltip {
  position-anchor: --trigger;
  position-area: block-start center;
  position-try-fallbacks: block-end center, inline-end center;
}

Prohlížeč automaticky vybere první posici, kam se element vejde.

Praktické využití

• Tooltipy a popovery – automatické umístění bez JS
• Kontextové nabídky – posice relativně k triggeru
• Spojovací čáry – visuální propojení souvisejících prvků
• Komentáře a anotace – napojení na konkrétní části obsahu
• Dropdown menu – přesné zarovnání pod tlačítko

Podpora v prohlížečích

Od ledna 2026 funguje CSS Anchor Positioning ve všech moderních prohlížečích (Chrome, Edge, Safari, Firefox). Pro starší prohlížeče je vhodné použít jako progresivní vylepšení nebo fallback v JavaScriptu.

Odkazy

• MDN: CSS Anchor Positioning
• Chrome Developers: Anchor Positioning API
• CSS-Tricks: CSS Anchor Positioning Guide
• web.dev: Anchor positioning
• Drawing Connections with CSS Anchor Positioning