`top, right, bottom, left și inset` în CSS

Stabilesc distanțele de deplasare pentru elementele care au position setat pe relative, absolute, fixed sau sticky.

Sintaxă CSS

top: 0;
right: 16px;
bottom: 0;
left: 0;
inset: 0;           /* scurtătură modernă pentru toate cele 4 laturi! */
inset: 10px 20px;   /* sus/jos 10px, stânga/dreapta 20px */

Ce face `top, right, bottom, left și inset`

Proprietățile top, right, bottom și left indică deplasarea față de marginile de referință.

Proprietatea modernă inset: 0 este o scurtătură salvatoare care înlocuiește scrierea simultană a top: 0; right: 0; bottom: 0; left: 0;, fiind ideală pentru a întinde un element pe toată suprafața părintelui (de exemplu un fundal întunecat de modal).

Valori uzuale

Valoare	Descriere
`dimensiune (px, rem, %)`	Distanța față de marginea respectivă.
`auto`	Valoarea implicită.
`inset`	Scurtătură logică pentru top, right, bottom și left.

Exemple

Exemplul 1: Acoperire completă a unui card cu o mască întunecată (overlay)

inset: 0 întinde masca semi-transparentă pe toată suprafața.

.masca-intunecata {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

Efect vizual în browser

Un strat negru semi-transparent care acoperă perfect întreaga cutie părinte de la marginea de sus până jos.

Greșeli frecvente

Încercarea de a folosi top, left, right sau bottom pe un element care are position: static (comportamentul implicit); coordonatele nu au absolut niciun efect pe elementele statice.

Comenzi înrudite

position (relative, absolute, fixed, sticky): Definește metoda de poziționare a elementului pe ecran, permițând mutarea lui cu top, right, bottom, left.
z-index: Stabilește ordinea de suprapunere a elementelor pe axa adâncimii Z (care element stă deasupra cui).

Ce face top, right, bottom, left și inset