Pozitionare

Implicit, browserul așază elementele în fluxul normal al paginii: blocurile (titluri, paragrafe, <div>) unul sub altul, pe toată lățimea disponibilă, iar elementele în linie (<a>, <strong>, <img>) unul după altul, în rândul de text. CSS-ul îți permite să schimbi această ordine: să muți un element față de locul lui, să-l fixezi pe ecran, să-l pui deasupra altora sau să așezi elementele pe coloane și rânduri.

Articolul prezintă întâi proprietățile display, position, z-index și float, apoi metodele moderne de așezare a paginii, Flexbox și Grid, și adaptarea pentru ecranele mici cu media queries. Dimensiunile, marginile și chenarele cutiilor sunt explicate în articolul Chenare și margini.

Tipul de afișare: display

Proprietatea display stabilește cum participă un element la așezare. Valorile de bază sunt:

• block – elementul începe pe un rând nou și ocupă toată lățimea; acceptă width, height și margini pe verticală;
• inline – elementul stă în rândul de text și are lățimea conținutului; width și height nu au efect;
• inline-block – stă în rând ca un cuvânt, dar acceptă dimensiuni și margini ca un bloc;
• none – elementul nu este afișat deloc și nu ocupă spațiu (spre deosebire de visibility: hidden, care îl ascunde, dar îi păstrează locul);
• flex și grid – transformă elementul într-un container Flexbox sau Grid (vezi mai jos).

<style>
  .demo span { background: #fde68a; padding: 4px; border: 1px solid #b7791f; }
  .bloc { display: block; margin-bottom: 4px; }
  .ib { display: inline-block; width: 90px; text-align: center; }
  .ascuns { display: none; }
</style>
<div class="demo">
  <span>inline</span> <span>inline</span>
  <span class="bloc">block</span>
  <span class="ib">inline-block</span> <span class="ib">inline-block</span>
  <span class="ascuns">nu se vede</span>
</div>

Proprietatea position

position alege modul de poziționare, iar proprietățile top, right, bottom și left dau deplasarea (în px, em, rem, procente etc.). Prescurtarea inset: 0 înseamnă toate patru egale cu 0. Valorile lui position sunt:

• static – valoarea implicită: elementul stă în fluxul normal, iar top, left etc. nu au efect;
• relative – elementul rămâne în flux, dar poate fi deplasat față de locul lui;
• absolute – elementul este scos din flux și așezat față de cel mai apropiat strămoș poziționat;
• fixed – elementul este scos din flux și fixat față de fereastra browserului;
• sticky – elementul stă în flux până când, la derulare, ajunge la o anumită poziție, unde rămâne „lipit”.

Poziționarea relativă

Un element cu position: relative ocupă locul lui normal, după elementele anterioare și înaintea celor următoare. Cu top și left poate fi deplasat față de acest loc, dar spațiul lui inițial rămâne rezervat, așa că elementele vecine nu se mută:

<style>
  .rel { position: relative; left: 50px; top: 10px;
         background: #c6f6d5; padding: 4px; }
</style>
<p>Primul paragraf.</p>
<p class="rel">Deplasat cu 50px la dreapta și 10px în jos.</p>
<p>Al treilea paragraf rămâne la locul lui.</p>

Cel mai des, position: relative se folosește fără deplasare, doar ca să devină reperul pentru elementele poziționate absolut din interiorul lui.

Poziționarea absolută

Un element cu position: absolute este scos din flux (celelalte elemente se comportă ca și cum n-ar exista) și este așezat exact la coordonatele date. Coordonatele se măsoară față de cel mai apropiat strămoș care are o poziționare diferită de static; dacă nu există niciunul, față de pagină. De aceea, containerul primește de obicei position: relative:

<style>
  .cadru { position: relative; height: 140px;
           border: 2px dashed #718096; }
  .abs { position: absolute; background: #bee3f8; padding: 4px; }
  .t1 { left: 10px; top: 10px; }
  .t2 { right: 10px; bottom: 10px; }
</style>
<div class="cadru">
  <p class="abs t1">left: 10px; top: 10px</p>
  <p class="abs t2">right: 10px; bottom: 10px</p>
</div>

Deschide exemplul într-o pagină separată (titluri poziționate absolut) și exemplul care compară poziționarea absolută cu cea relativă.

Poziționarea absolută este potrivită pentru elemente mici, suprapuse peste altele: o etichetă „Nou” în colțul unei imagini, un buton de închidere, un meniu derulant. Nu o folosi pentru așezarea întregii pagini: elementele nu se mai adaptează la conținut și la mărimea ecranului.

Poziționarea fixă

Cu position: fixed, elementul se raportează la fereastra browserului și rămâne pe loc când pagina este derulată. Se folosește, de exemplu, pentru un buton „Înapoi sus” sau o bară de anunț:

.sus {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Pentru că elementul fix acoperă o parte din pagină, ai grijă să nu ascundă conținut, mai ales pe telefoane.

Poziționarea sticky

Un element cu position: sticky se comportă normal până când, la derulare, ajunge la poziția dată (de exemplu top: 0); de acolo rămâne lipit de marginea zonei derulate, dar numai cât timp containerul lui este vizibil. Zona derulată din exemplu este un <div> cu înălțime fixă și overflow-y: auto: proprietatea overflow stabilește ce se întâmplă cu conținutul care nu încape (visible – iese din cutie, implicit; hidden – este tăiat; auto – apare o bară de derulare doar la nevoie; scroll – bara apare mereu). Derulează lista:

<style>
  .lista { height: 150px; overflow-y: auto; border: 1px solid #a0aec0; }
  .lista h4 { position: sticky; top: 0; margin: 0;
              padding: 4px 8px; background: #2b6cb0; color: #fff; }
  .lista p { margin: 0; padding: 4px 8px; }
</style>
<div class="lista">
  <h4>Fructe</h4>
  <p>mere</p><p>pere</p><p>prune</p><p>caise</p>
  <h4>Legume</h4>
  <p>morcovi</p><p>ceapă</p><p>ardei</p><p>roșii</p>
</div>

Suprapunerea: z-index

Elementele poziționate se pot suprapune. Ordinea lor pe a treia dimensiune (axa z, spre privitor) se stabilește cu z-index, un număr întreg, care poate fi și negativ: elementul cu valoarea mai mare este așezat deasupra. Fără z-index, elementul scris mai târziu în cod apare deasupra celui scris înainte.

<style>
  .stiva { position: relative; height: 140px; }
  .stiva img { position: absolute; border: 2px solid #fff;
               box-shadow: 0 2px 6px rgb(0 0 0 / 0.4); }
  .z1 { left: 0; top: 0; z-index: 3; }
  .z2 { left: 40px; top: 25px; z-index: 2; }
  .z3 { left: 80px; top: 50px; z-index: 1; }
</style>
<div class="stiva">
  <img class="z1" src="css/poza.jpg" alt="Poza 1 (z-index: 3)" width="100" height="75">
  <img class="z2" src="css/poza.jpg" alt="Poza 2 (z-index: 2)" width="100" height="75">
  <img class="z3" src="css/poza.jpg" alt="Poza 3 (z-index: 1)" width="100" height="75">
</div>

Deschide exemplul într-o pagină separată

z-index funcționează pe elementele poziționate (orice valoare a lui position în afară de static) și pe elementele din containerele Flexbox și Grid. Valoarea se compară doar între elementele din același context de suprapunere (stacking context): un element cu z-index: 9999 aflat într-un părinte cu z-index: 1 nu poate trece deasupra unui element cu z-index: 2 din afara părintelui. Dacă un z-index „nu funcționează”, de obicei aceasta este cauza.

Textul în jurul imaginilor: float și clear

float: left sau float: right mută un element la stânga sau la dreapta containerului, iar textul care urmează curge pe lângă el. Acesta este rolul pentru care a fost creat float și singurul pentru care se mai folosește azi: o imagine cu textul în jurul ei.

<style>
  .stanga { float: left; margin: 0 12px 6px 0; }
  .sub { clear: both; border-top: 1px solid #a0aec0; padding-top: 4px; }
</style>
<p><img class="stanga" src="css/poza.jpg" alt="Lalele roșii" width="100" height="75">
Lalelele înfloresc primăvara, în aprilie și mai. Textul acestui paragraf
curge pe lângă imagine, iar după ce trece de ea ocupă din nou toată
lățimea, ca într-o revistă.</p>
<p class="sub">Acest paragraf are clear: both și începe sub imagine.</p>

Proprietatea clear (left, right sau both) obligă un element să înceapă sub elementele flotante. Dacă un container are în el doar elemente flotante, înălțimea lui devine zero; regula display: flow-root pe container rezolvă problema (înlocuiește vechiul truc clearfix).

În trecut, float (și, înainte de el, tabelele) se folosea pentru așezarea coloanelor unei pagini. Metoda era fragilă și nu mai are rost: pentru coloane și rânduri se folosesc Flexbox și Grid.

Flexbox: așezarea pe un rând sau pe o coloană

Un element cu display: flex devine container flex, iar copiii lui direcți se așază unul lângă altul pe o axă. Proprietățile principale ale containerului sunt:

• flex-direction – direcția: row (rând, implicit) sau column (coloană);
• justify-content – distribuirea pe axa principală: flex-start, center, flex-end, space-between, space-around;
• align-items – alinierea pe axa transversală: stretch (implicit), flex-start, center, flex-end;
• flex-wrap: wrap – permite trecerea elementelor pe rândul următor când nu mai încap;
• gap – spațiul dintre elemente.

Copiii pot primi flex: 1, ca să împartă între ei spațiul rămas. Un exemplu tipic este un meniu de navigare, cu sigla în stânga și linkurile în dreapta:

<style>
  .meniu { display: flex; justify-content: space-between;
           align-items: center; gap: 12px; padding: 8px 12px;
           background: #2d3748; color: #fff; }
  .meniu ul { display: flex; gap: 16px; margin: 0; padding: 0;
              list-style: none; }
  .meniu a { color: #fff; }
</style>
<nav class="meniu">
  <strong>Sigla</strong>
  <ul>
    <li><a href="#acasa">Acasă</a></li>
    <li><a href="#articole">Articole</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<style>
  .rand { display: flex; flex-wrap: wrap; gap: 10px; }
  .rand div { background: #e9d8fd; padding: 10px; }
  .lat { flex: 1; }
</style>
<div class="rand">
  <div>fix</div>
  <div class="lat">flex: 1 (ocupă restul)</div>
  <div>fix</div>
</div>

Grid: așezarea pe rânduri și coloane

Cu display: grid, containerul devine o grilă. Coloanele se definesc cu grid-template-columns, rândurile (opțional) cu grid-template-rows, iar spațiul dintre celule cu gap. Unitatea fr înseamnă „o parte din spațiul liber”: 1fr 2fr împarte lățimea în trei, prima coloană primind o treime.

<style>
  .grila { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8px; }
  .grila div { background: #c6f6d5; padding: 10px; text-align: center; }
  .lung { grid-column: span 2; }
</style>
<div class="grila">
  <div>1fr</div><div>2fr</div><div>1fr</div>
  <div class="lung">grid-column: span 2</div><div>1fr</div>
</div>

O formulă foarte folosită pentru liste de carduri este repeat(auto-fit, minmax(150px, 1fr)): browserul pune atâtea coloane de cel puțin 150px câte încap, iar pe un ecran îngust trece singur la o singură coloană, fără media queries:

<style>
  .carduri { display: grid; gap: 10px;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .carduri div { background: #feebc8; padding: 16px; border-radius: 6px; }
</style>
<div class="carduri">
  <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  <div>Card 4</div><div>Card 5</div>
</div>

Pe scurt: Flexbox este potrivit pentru o singură direcție (un rând de butoane, un meniu, elementele unui card), iar Grid pentru așezarea în două dimensiuni (structura paginii, galerii, formulare pe coloane). Cele două se combină frecvent.

Centrarea pe orizontală și pe verticală

Centrarea unui element în mijlocul unui container, odinioară dificilă, se face azi cu două linii. Cu Flexbox: justify-content: center și align-items: center; cu Grid, și mai scurt: place-items: center:

<style>
  .flex-centru { display: flex; justify-content: center; align-items: center;
                 height: 100px; background: #edf2f7; margin-bottom: 8px; }
  .grid-centru { display: grid; place-items: center;
                 height: 100px; background: #edf2f7; }
  .cutiuta { padding: 8px 14px; background: #2b6cb0; color: #fff; }
</style>
<div class="flex-centru"><div class="cutiuta">centrat cu Flexbox</div></div>
<div class="grid-centru"><div class="cutiuta">centrat cu Grid</div></div>

Pentru centrarea doar pe orizontală a unui bloc cu lățime limitată rămâne valabilă și metoda margin: 0 auto din articolul anterior, iar pentru text, text-align: center.

Adaptarea pentru telefoane: media queries

O pagină responsive își schimbă așezarea după lățimea ecranului. Primul pas este eticheta viewport din <head>, fără de care telefonul afișează pagina micșorată, ca pe un ecran de calculator:

<meta name="viewport" content="width=device-width, initial-scale=1">

Al doilea pas sunt regulile @media, care se aplică numai când este îndeplinită o condiție, de obicei o lățime minimă sau maximă a ferestrei. Metoda recomandată (mobile first) este să scrii întâi stilurile pentru ecranul mic și să adaugi coloane pe ecranele mai late:

.pagina {
  display: grid;
  gap: 20px;                 /* pe telefon: o singură coloană */
}

@media (min-width: 768px) {  /* de la 768px în sus: conținut + bară laterală */
  .pagina {
    grid-template-columns: 3fr 1fr;
  }
}

@media (max-width: 480px) {  /* ecrane foarte înguste */
  h1 { font-size: 1.5rem; }
}

Poți încerca rezultatul îngustând fereastra browserului sau folosind modul de simulare a dispozitivelor mobile din instrumentele pentru dezvoltatori (F12, apoi pictograma telefon/tabletă). Pe lângă lățime, media queries pot testa orientarea ecranului (orientation: landscape), tema preferată a utilizatorului (prefers-color-scheme: dark) sau tipărirea (@media print).

Multe adaptări nu au nevoie de media queries: max-width: 100% pentru imagini, flex-wrap: wrap și grilele cu auto-fit se ajustează singure. Lista proprietăților folosite aici se găsește în referința CSS.