Layout-uri CSS fără Flexbox și Grid - Poziționare clasică și control vizual

Layout-uri CSS fără Flexbox și Grid - Control total cu tehnici clasice

Flexbox și Grid sunt standardele moderne pentru layout-uri CSS, dar nu sunt singurele opțiuni. Înainte ca aceste metode să devină populare, dezvoltatorii foloseau tehnici clasice precum inline-block, position sau table-cell pentru a construi structuri complexe. În acest material explorăm cum poți crea layout-uri solide fără să te bazezi pe Flex sau Grid, învățând să controlezi spațierea, alinierea și poziționarea cu precizie.

1. Structuri cu `inline-block` - Simplitate și compatibilitate

Înainte de apariția Flexbox, inline-block era o metodă populară pentru a crea layout-uri pe orizontală. Elementele se aliniază natural unul lângă altul, iar compatibilitatea cu browserele vechi este excelentă. Totuși, trebuie gestionate spațiile dintre elemente și alinierea verticală.

☞ Eliminați din codul CSS de mai jos, linia font-size: 0, pentru a vedea spațiul alb dintre coloane! Acea spațiere apare deoarece elementele inline-block sunt tratate ca text, iar browserul interpretează spațiile dintre ele ca spații normale între cuvinte.

🔧 Exemplu live

<div class="container">
  <div class="box">Coloana 1</div>
  <div class="box">Coloana 2</div>
</div>
<br>
<h2>De ce folosim <code>font-size: 0</code> în container?</h2>
<p>Elementele cu <code>display: inline-block</code> se comportă ca text — și între ele apare un spațiu alb, exact ca între cuvinte. Acest spațiu vine din HTML, nu din CSS, și poate strica alinierea sau proporțiile layout-ului.<p>
<p>Ca să eliminăm acel spațiu, setăm <code>font-size: 0</code> pe container. Astfel, browserul nu mai „vede” spațiul ca text și îl ignoră complet. Apoi, în interiorul fiecărui element, revenim la dimensiunea normală a textului, de exemplu <code>font-size: 1.2rem</code>.<p>

.container {
  font-size: 0;
}
.box {
  display: inline-block;
  width: 49%;
  font-size: 1.2rem;
  background: #e0e0e0;
  padding: 20px;
  box-sizing: border-box;
  vertical-align: top;
}

2. Structuri cu `position: absolute`

Metoda absolute oferă control total asupra poziției unui element în raport cu containerul său. Este utilă pentru layout-uri fixe, sidebar-uri, elemente suprapuse sau componente care trebuie să rămână într-un loc anume. Totuși, necesită atenție la scalabilitate și la relația cu elementele învecinate.

🔧 Exemplu live

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

3. Position Fixed - Elemente care rămân vizibile la scroll

position: fixed ancorează elementul față de fereastra browserului, nu față de un container. Asta înseamnă că elementul rămâne vizibil chiar și când utilizatorul face scroll. Este ideal pentru bare de navigație fixe, butoane „Back to top”, notificări sau bannere persistente.

🔧 Exemplu live

<div class="fixed-box">Fixat!</div>
<div class="content">
  <p>Scroll down pentru a vedea cum rămâne fixat.<p>
  <p style="margin-top: 1000px;">Sfârșitul paginii<p>
</div>

.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.content {
  padding: 20px;
  font-family: sans-serif;
}

4. Position Sticky - Elemente care se lipesc la scroll

position: sticky combină comportamentul relative și fixed. Elementul se comportă normal până când ajunge la o poziție specificată, apoi „se lipește” acolo în timpul scroll-ului. Este ideal pentru titluri de secțiuni, meniuri secundare sau elemente care trebuie să rămână vizibile temporar.

🔧 Exemplu live

<div class="wrapper">
  <div class="sticky-box">Sticky!</div>
  <div class="content">
    <p>Scroll down pentru a vedea cum se lipește.<p>
    <p style="margin-top: 1000px;">Sfârșitul paginii<p>
  </div>
</div>

.wrapper {
  padding: 20px;
}

.sticky-box {
  position: sticky;
  top: 10px;
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.content {
  margin-top: 20px;
  font-family: sans-serif;
}

Z-Index - Controlul stratului vizual

z-index determină ordinea de suprapunere a elementelor. Cu cât valoarea este mai mare, cu atât elementul va fi afișat deasupra celorlalte. Funcționează doar pe elemente care au position diferit de static.

🔧 Exemplu live

<div class="layer layer1">Layer 1</div>
<div class="layer layer2">Layer 2</div>
<div class="layer layer3">Layer 3</div>

.layer {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 150px;
  height: 150px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer1 {
  background-color: #dc3545;
  z-index: 1;
}

.layer2 {
  background-color: #ffc107;
  top: 80px;
  left: 80px;
  z-index: 2;
}

.layer3 {
  background-color: #28a745;
  top: 110px;
  left: 110px;
  z-index: 3;
}

Poziționare combinată - Absolute-Fixed-Sticky-Z-Index

Acest exemplu combină cele mai folosite metode de poziționare în CSS. Vei vedea cum funcționează împreună absolute (poziționare precisă în container), fixed (element fixat în fereastră), sticky (element care se lipește la scroll) și z-index (controlul stratului vizual).

🔧 Exemplu live

<div class="fixed-banner">Fixed</div>

<div class="wrapper">
  <div class="sticky-header">Sticky</div>

  <div class="container">
    <div class="absolute-box">Absolute</div>
    <div class="overlay">Z-Index</div>
  </div>

  <div class="content">
    <p>Scroll down pentru a vedea comportamentul fiecărui element.<p>
    <p style="margin-top: 1000px;">Sfârșitul paginii<p>
  </div>
</div>

.fixed-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}

.wrapper {
  margin-top: 50px;
  padding: 20px;
}

.sticky-header {
  position: sticky;
  top: 50px;
  background-color: #28a745;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 500;
}

.container {
  position: relative;
  height: 200px;
  background-color: #f0f0f0;
  margin-top: 20px;
  border: 2px solid #333;
}

.absolute-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #dc3545;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 10;
}

.overlay {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 120px;
  height: 120px;
  background-color: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 20;
}

.content {
  margin-top: 40px;
  font-family: sans-serif;
}

Fără să minimalizăm puterea Flexbox și Grid, acest tutorial a demonstrat că tehnicile CSS clasice rămân relevante și capabile să ofere control total asupra layout-ului — atunci când sunt folosite cu pricepere.

🧠 Quiz - Layout-uri CSS fără Flexbox și Grid

CSS Media Queries ➔

Layout-uri CSS fără Flexbox și Grid - Control total cu tehnici clasice

1. Structuri cu inline-block - Simplitate și compatibilitate

2. Structuri cu position: absolute

3. Position Fixed - Elemente care rămân vizibile la scroll

4. Position Sticky - Elemente care se lipesc la scroll

Z-Index - Controlul stratului vizual

Poziționare combinată - Absolute-Fixed-Sticky-Z-Index

🧠 Quiz - Layout-uri CSS fără Flexbox și Grid

Politica Cookie-uri

1. Structuri cu `inline-block` - Simplitate și compatibilitate

2. Structuri cu `position: absolute`