Poziționare și z-index
static, relative, absolute, fixed, sticky și stacking context.
Actualizat
Ce este poziționarea
Implicit, elementele stau în fluxul normal — unul după altul, cum apar în HTML. Proprietatea position îți permite să scoți un element din flux sau să-l muți față de ceva anume.
Tipurile de position
| Valoare | Rămâne în flux? | Se poziționează față de | Când |
|---|---|---|---|
static (implicit) |
da | — (top/left nu au efect) |
normal |
relative |
da, spațiul rămâne | propria poziție | mic offset; referință pentru copii absolute |
absolute |
nu | cel mai apropiat strămoș poziționat (non-static) | badge pe card, icon în input, dropdown |
fixed |
nu | fereastra (viewport) | modal, overlay, toast, buton „sus” |
sticky |
da, până la prag | scroll-ul părintelui | header lipit, titluri de secțiune, sidebar |
Combinația relative + absolute
.card { position: relative; } /* devine referința */
.badge { position: absolute; top: 0.5rem; right: 0.5rem; }Fără position: relative pe card, badge-ul s-ar poziționa față de primul strămoș poziționat — de multe ori, pagina întreagă.
inset
inset: 0 = top: 0; right: 0; bottom: 0; left: 0. Overlay pe tot ecranul:
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); }sticky
.site-header { position: sticky; top: 0; }Elementul curge normal până ajunge la top: 0, apoi rămâne lipit — doar în interiorul părintelui său. Nu merge dacă un strămoș are overflow: hidden.
z-index și stacking context
z-index decide cine e deasupra, dar doar pentru elemente poziționate (sau flex/grid items). Capcana: un stacking context nou izolează copiii — un copil cu z-index: 9999 nu poate ieși deasupra unui element din afara contextului părintelui.
Creează stacking context: position + z-index, opacity < 1, transform, filter, isolation: isolate.
Regula practică: păstrează o scală mică (10 header, 20 dropdown, 50 modal), nu escaladare cu 999999.
Pe scurt
relative= referință;absolute= față de referință;fixed= față de ecran;sticky= lipit la scroll.inset: 0acoperă tot.z-indexfuncționează în interiorul stacking context-ului.