Lecția 5: Display și Position în CSS

1. Proprietatea `display`

Definește modul de afișare al unui element în pagină. Cele mai comune valori sunt:

block – elementul ocupă toată lățimea disponibilă (ex: <div>, <p>)
inline – elementul ocupă doar spațiul necesar (ex: <span>)
inline-block – ca inline, dar acceptă dimensiuni (width/height)
none – elementul nu se mai afișează deloc

Exemplu: `display: none`

<style>
  .ascuns {
    display: none;
  }
</style>

<p>Acesta e vizibil.</p>
<p class="ascuns">Acesta NU se va afișa.</p>

2. Proprietatea `position`

Controlează poziția unui element față de alte elemente sau de pagină.

Principalele valori:

static – implicit, fără poziționare specială
relative – se deplasează față de poziția inițială
absolute – se poziționează în raport cu cel mai apropiat părinte cu position: relative
fixed – poziționare față de ecran (rămâne fix când derulezi)
sticky – combină comportamentul relative și fixed

3. Exemplu: `position: relative`

Sunt un element cu position: relative
M-am deplasat cu top: 20px și left: 20px.

4. Exemplu: `position: absolute` în container

Sunt poziționat absolute în containerul relativ

Observație: dacă nu există un părinte cu position: relative, elementul absolut se va poziționa față de <body>.

5. Exemplu: `position: fixed`

<style>
  .fix {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: #fff;
    border: 1px solid #CC0000;
    padding: 5px;
  }
</style>

<div class="fix">Sunt fixat în colțul din dreapta-jos</div>

6. Concluzie

Combinația dintre display și position este esențială pentru layout-ul paginii.

În lecțiile următoare vom explora flexbox, grid layout și alinierea elementelor.

Lecția 5: Display și Position în CSS

1. Proprietatea display

Exemplu: display: none

2. Proprietatea position