Anchor Positioning (anchor-name, position-anchor, anchor()) în CSS

.buton-info {
  anchor-name: --info;
}

.tooltip {
  position: absolute;      /* sau fixed */
  position-anchor: --info;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
}

Ce face Anchor Positioning (anchor-name, position-anchor, anchor())

Până recent, un tooltip lipit de un buton cerea JavaScript care citea coordonatele butonului și le recalcula la fiecare derulare. Cu Anchor Positioning, dai butonului un nume (anchor-name: --info), iar elementului poziționat (position: absolute sau fixed) îi spui de cine să se lege (position-anchor: --info).

Funcția anchor() se folosește în top, right, bottom, left (și inset) și întoarce poziția unei margini a ancorei: top: anchor(bottom) înseamnă „marginea de sus a tooltip-ului la marginea de jos a butonului”. Poți numi explicit ancora: anchor(--info bottom). Funcția anchor-size() dă mărimea ancorei, de exemplu ca un meniu să fie la fel de lat ca butonul.

Funcționează foarte bine cu popover: elementul stă în top layer, peste tot restul paginii, dar rămâne lipit de buton. Suport: Chrome 125, Firefox 147, Safari 26. Pentru plasarea simplă (sus, jos, stânga) vezi și position-area.

Valori uzuale

Valoare	Descriere
anchor-name: --nume	Pus pe elementul de referință; numele începe cu două cratime.
position-anchor: --nume	Pus pe elementul poziționat; alege ancora implicită.
anchor(latură)	Poziția unei laturi a ancorei: top, bottom, left, right, center, start, end.
anchor(--nume latură)	La fel, dar cu o ancoră numită explicit.
anchor-size(dimensiune)	Mărimea ancorei: width, height, block, inline.

Exemple

Exemplul 1: Tooltip sub butonul de ajutor

Tooltip-ul este un popover; CSS-ul îl lipește sub buton, aliniat la stânga lui, cu 8px spațiu.

/* <button popovertarget="ajutor" class="btn-ajutor">?</button>
   <div id="ajutor" popover class="tooltip">Plata se face în lei.</div> */
.btn-ajutor {
  anchor-name: --ajutor;
}
.tooltip {
  position-anchor: --ajutor;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  margin: 8px 0 0;
}

Efect vizual în browser

La clic pe butonul „?”, mesajul „Plata se face în lei.” apare imediat sub buton, aliniat cu marginea lui stângă. La derularea paginii, tooltip-ul se mișcă împreună cu butonul.

Exemplul 2: Meniu derulant la fel de lat ca butonul

anchor-size(width) copiază lățimea butonului, oricât de lung ar fi textul lui.

.btn-oras {
  anchor-name: --oras;
}
.meniu-orase {
  position: absolute;
  position-anchor: --oras;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
}

Efect vizual în browser

Lista cu orașe (Iași, Cluj, Timișoara) se deschide direct sub butonul „Alege orașul” și are exact aceeași lățime ca butonul.

Greșeli frecvente

• Numele ancorei fără cele două cratime (anchor-name: info); numele trebuie să fie de forma --info.
• Folosirea lui anchor() pe un element fără position: absolute sau fixed; în fluxul normal funcția nu are efect.
• Ancora pusă în HTML după elementul poziționat, în același container; ancora trebuie să fie așezată înaintea elementului care se leagă de ea, altfel legătura nu se face.

Comenzi înrudite

• position-area și position-try-fallbacks: Așază un element ancorat într-una din cele 9 zone din jurul ancorei și îi dă poziții de rezervă când nu încape pe ecran.
• position (relative, absolute, fixed, sticky): Definește metoda de poziționare a elementului pe ecran, permițând mutarea lui cu top, right, bottom, left.
• top, right, bottom, left și inset: Stabilesc distanțele de deplasare pentru elementele care au position setat pe relative, absolute, fixed sau sticky.
• z-index: Stabilește ordinea de suprapunere a elementelor pe axa adâncimii Z (care element stă deasupra cui).