CSS Relative position

CSS Relative positioning  este relativ, usor de inteles :) . Daca pozitionam, relativ, un HTML element el va sta exact acolo unde-l punem. Putem atunci sa impingem relativ elementul setind punctului de start pozitia pe vertical si pe orizontal. Daca o sa setam top pozitia sa fie de 20px, atunci HTML Elementul se va pozitiona cu 20px sub pozitia initiala, setind pozitia left cu 20px, atunci elementul se va muta ai la dreapta creind un spatiu de 20px fata de pozitia de inceput. Iata si CSS exemplul:
#myBox {
  position: relative;
  left: 20px;
  top: 20px;
}

CSS Box model

Box model este o piatra de temelie a tehnologiei CSS si dicteaza cum trebuie sa fie dispuse elementele, si, intr-o anumita masura cum trebuie sa interactioneze aceste elemente intre ele. Fiecare element in pagina este considerat ca o cutie dreptunghiulara formata din continutul elementului, padding, border, si margin.

Padding este aplicat in jurul suprafetei cu continut. Daca adaugam un background unui element atunci backgroundul va fi aplicat suprafetei compusa din continut si padding. In acest mod, padding este folosit deseori pentru a crea un cadru in jurul continutului. Adaugind border unui element inseamna a aplica o linie in afara suprafetei cu cintinut si padding. Aceste linie sunt de diferite stiluri: solid, dotted, dashed.
In afara border se afla suprafata creata de margin. Margin sunt transparente si nu pot fi vazute, in general sunt folosite pentru a manipula spatiile dintre elemente.

CSS Visual formatting model.

Trei dintre cele mai importante concepte CSS pentru a intelege aceasta tehnologie sunt: floating, positioning si box model. Aceste concepte controleaza modul in care sunt vizualizate elementele pe o pagina, formind baza CSS layout. Daca sunteti familiarizati sa controlati CSS layoutul paginilor cu ajutorul HTML table o sa vi se para stranii la inceput. De fapt, majoritatea celor care activeaza in domeniul WEB au incercat sa dezvolte site-uri folosind CSS inainte ca sa inteleaga pe deplin complexitatea box model, diferenta intre absolute si relative posiotioning, si cum in realitate functioneaza float si clear in CSS. Odata ce o sa intelegeti cit de cit aceste concepte, dezvoltarea layouturilor cu ajutorul CSS o sa fie mult mai usoara.