`position-area și position-try-fallbacks` în CSS

Display și Poziționare Chrome 129, Firefox 147, Safari 26

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.

Sintaxă CSS

.tooltip {
  position-anchor: --info;
  position-area: top;              /* deasupra ancorei */
  position-try-fallbacks: flip-block; /* jos, dacă sus nu încape */
  position-visibility: anchors-visible;
}

@position-try --dreapta {
  position-area: right;
}

Ce face `position-area și position-try-fallbacks`

position-area este cea mai simplă cale de a folosi Anchor Positioning. Imaginează-ți o grilă de 3 × 3 cu ancora în centru: alegi zona în care vrei elementul cu cuvinte cheie precum top, bottom, right, top right sau variantele logice block-start, block-end, inline-end. Cu span-* elementul se întinde pe două zone (de exemplu bottom span-right).

position-try-fallbacks dă poziții de rezervă: dacă tooltip-ul nu încape deasupra (butonul este lângă marginea de sus a ecranului), browserul încearcă variantele din listă. flip-block îl mută pe partea opusă pe verticală, flip-inline pe orizontală. Variante proprii definești cu regula @position-try --nume { ... }.

position-visibility: anchors-visible ascunde elementul când ancora iese din zona vizibilă (de exemplu la derulare într-un container). Suport pentru position-area: Chrome 129, Firefox 147, Safari 26 (în Chrome 125–128 proprietatea se numea inset-area); position-visibility: Chrome 125, Firefox 147, Safari 26.2.

Valori uzuale

Valoare	Descriere
`position-area: top / bottom / left / right`	Zona din jurul ancorei în care stă elementul.
`position-area: top right`	Un colț: combinația unei zone verticale cu una orizontală.
`position-area: bottom span-right`	Sub ancoră, întins spre dreapta pe două coloane ale grilei.
`position-try-fallbacks: flip-block`	Rezervă: oglindire pe axa bloc (sus ↔ jos).
`position-try-fallbacks: flip-inline`	Rezervă: oglindire pe axa inline (stânga ↔ dreapta).
`@position-try --nume`	Definește o poziție de rezervă proprie, folosită în position-try-fallbacks.

Exemple

Exemplul 1: Tooltip deasupra, mutat dedesubt când nu încape

Implicit tooltip-ul apare deasupra butonului; dacă ar ieși din ecran, se mută automat dedesubt.

.btn-pret {
  anchor-name: --pret;
}
.tooltip-pret {
  position: absolute;
  position-anchor: --pret;
  position-area: top;
  position-try-fallbacks: flip-block;
  margin-bottom: 6px;
}

Efect vizual în browser

În mijlocul paginii, textul „Prețul include TVA” apare centrat deasupra butonului „149 lei”. Când butonul este chiar sub marginea de sus a ferestrei, tooltip-ul apare dedesubt.

Exemplul 2: Meniu cu rezervă proprie definită cu @position-try

Meniul se deschide sub buton, spre dreapta; dacă nu încape, încearcă în stânga, apoi deasupra.

@position-try --stanga {
  position-area: bottom span-left;
}
.meniu-cont {
  position: absolute;
  position-anchor: --cont;
  position-area: bottom span-right;
  position-try-fallbacks: --stanga, flip-block;
  position-visibility: anchors-visible;
}