CSS Poziţie. Elementul cu position: relative;. Elementul cu position: fixed;.

Susține Lectii-Virtuale!

Element cu position: relative; (poziție: relativă;)

Un element cu position: relative; (poziție: relativă;) este poziționat în raport cu poziția normală.
Setarea proprietățiilor de sus, dreapta, jos și stânga a unui element relativ poziționat (relatively-positioned element) va face ca acesta să fie ajustat departe de poziția normală. Alt conținut nu va fi ajustat pentru a se încadra în niciun spațiu lăsat de element.



Iată CSS-ul folosit:

Exemplu:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Elementul cu position: fixed; (poziție: fix;)

Un element cu position: fixed; (poziție: fix;) este poziționat în raport cu afișajul, ceea ce înseamnă că acesta rămâne întotdeauna în același loc, chiar dacă pagina este defilată. Proprietățile de sus, dreapta, jos și stânga sunt utilizate pentru poziționarea elementului.
Un element fix nu lasă un gol în pagina în care ar fi fost localizat în mod normal.

Observați elementul fix din colțul din dreapta jos al paginii.

Iată CSS-ul folosit:

Exemplu:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}