Poziție - CSS-Tricks | Almanah CSS 2025

positionProprietatea vă poate ajuta să manipuleze locația unui element, de exemplu:

.element ( position: relative; top: 20px; )

În raport cu poziția sa inițială, elementul de mai sus va fi acum împins în jos de sus cu 20 px. Dacă ar fi să animăm aceste proprietăți, putem vedea cât de mult ne oferă acest control (deși aceasta nu este o idee bună din motive de performanță):

relativeeste doar una din cele șase valori pentru positionproprietate. Iată ceilalți:

Valori

static: fiecare element are o poziție statică în mod implicit, astfel încât elementul să rămână la fluxul normal de pagini. Deci, dacă există un set stânga / dreapta / sus / jos / z-index, atunci nu va exista niciun efect asupra acelui element.
relative: poziția inițială a unui element rămâne în fluxul documentului, la fel ca staticvaloarea. Dar acum stânga / dreapta / sus / jos / indexul z va funcționa. Proprietățile poziționale „împing” elementul din poziția inițială în acea direcție.
absolute: elementul este eliminat din fluxul documentului și alte elemente se vor comporta ca și cum nu ar fi acolo, în timp ce toate celelalte proprietăți de poziție vor funcționa asupra acestuia.
fixed: elementul este eliminat din fluxul documentului ca elemente absolut poziționate. De fapt, aceștia se comportă aproape la fel, doar elementele fixe poziționate sunt întotdeauna relative la document, nu un anumit părinte și nu sunt afectate de derulare.
sticky(experimental): elementul este tratat ca o relativevaloare până când locația de derulare a ecranului atinge un prag specificat, moment în care elementul ia o fixedpoziție în care i se spune să rămână.
inherit: positionvaloarea nu se încadrează în cascadă, deci aceasta poate fi utilizată pentru a o forța în mod specific și inheritvaloarea de poziționare de la părintele său.

Absolut

Dacă un element copil are o absolutevaloare, atunci elementul părinte se va comporta ca și cum copilul nu ar fi deloc acolo:

.element ( position: absolute; )

Și când vom încerca să stabilească alte valori , cum ar fi left, bottomși rightvom găsi că elementul copil răspunde nu la dimensiunile mamă, dar documentul:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Pentru a face elementul copil poziționat absolut de elementul său părinte, trebuie să setăm acest lucru pe elementul părinte însuși:

.parent ( position: relative; )

Acum proprietăți , cum ar fi left, right, bottomși se topvor referi la elementul de bază, astfel încât , dacă vom face elementul copil transparent , putem vedea stând chiar în partea de jos a societății- mamă:

Fix

fixedValoarea este similară , absolutedeoarece poate ajuta la poziționarea unui element oriunde în raport cu documentul, însă această valoare nu este afectată de defilare. Vedeți elementul copil din demonstrația de mai jos și cum, odată ce derulați, continuă să rămână în partea de jos a paginii:

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom	Firefox	IE	Margine	Safari
4	2	7	12	3.1

Mobil / Tabletă

Android Chrome	Android Firefox	Android	Safari iOS
88	85	3	8

Lipicios

stickyValoarea este ca un compromis între relativeși fixedvalori. Începând cu această scriere, este în prezent o valoare experimentală, ceea ce înseamnă că nu face parte din specificațiile oficiale și este adoptată doar parțial de anumite browsere. Cu alte cuvinte, probabil că nu este cea mai bună idee să folosiți acest lucru pe un site de producție live.

Ce face? Ei bine, vă permite să poziționați un element în raport cu orice din document și apoi, odată ce un utilizator a parcurs un anumit punct din fereastră, fixați poziția elementului în acea locație, astfel încât acesta să rămână afișat persistent ca un element cu un fixedvaloare.

Luați următorul exemplu:

.element ( position: sticky; top: 50px; )

Elementul va fi poziționat relativ până când locația de derulare a ferestrei de vizualizare atinge un punct în care elementul va fi 50pxdin partea de sus a ferestrei. În acel moment, elementul devine lipicios și rămâne în fixedpoziția de 50pxsus a ecranului.

Următoarea demonstrație ilustrează acel punct, în care navigarea de sus este relativepoziționarea implicită , iar cea de-a doua navigare este setată stickyîn partea de sus a ferestrei. Vă rugăm să rețineți că demo-ul va funcționa numai în Chrome, Safari și Opera în momentul redactării acestui articol.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.