Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente.
Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul cadrelor.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.

1. Stabilirea modului de pozitionare

Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolut si fixed.
Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.

a) Pozitionarea statica

Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului.
Sintaxa pentru specificarea pozitionarii static este:

- Un element static nu poate fi repozitionat in mod explicit.

b) Pozitionarea relativa

Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.
Sintaxa pentru specificarea pozitionarii relative este: - Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right".

c) Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor x si y, indiferent de pozitiile altor elemente.
Sintaxa pentru specificarea pozitionarii absolute este: - Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului in care este inclus elementul pozitionat absolut.

d) Pozitionarea fixa

Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa pentru specificarea pozitionarii fixed este:

2. Pozitionarea in raport cu latura de sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului sau parinte, folosind proprietatile top si left
Forma generala este:

- Unde "valoare" poate fi: Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori negative.
In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu elementul parinte daca acesta are position:relative.
Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de marginile sus si stanga ale unui DIV in interiu caruia se afla:
<style type="text/css">
    div { position:relative; }
    h1 { top:10px; left:10px; }
</style>

<div>
    <h1>Text...</h1>
</div>

3. Pozitionarea in raport cu latura de jos, respectiv dreapta

In unele cazuri este necesara pozitionarea in raport cu laturile de jos, respectiv dreapta. In acest caz originea va fi coltul din dreapta-jos al ferestrei sau al elementului parinte.
Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea.
Forma generala este:

In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si left.

4. Pozitionarea in spatiul 3D

Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index. Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte elemente din fereastra.
Sintaxa generala pentru proprietatea z-index este:

Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.
In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z.

5. Includerea unui element absolut intr-un element relativ

Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi inclus intr-un element cu pozitionare relativa.
In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut") este inclusa (imbricata) in alta eticheta <div> (cu class="relativ"):

<div class=”relativ”>
...
      <div class=”absolut”> ... </div>
...
</div>
Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in foaia de stil urmatorul cod:
.relativ {position:relative; top:30px; left:50px; }
.absolut {position:absolute; top:15px; left:0px; }

6. Includerea unui element relativ intr-un element absolut

Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul foloseste ca origine coltul din stanga-sus al parintelui.
In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa (imbricata) in alta eticheta <div> (cu class="absolut"):

<div class=”absolut”>
...
      <div class=”relativ”> ... </div>
...
</div>
Pentru a face o pozitionare relativa a elementului inclus (care are class="relativ") in elementul parinte (care are class="absolut"), caruia ii definim o pozitionare absoluta; adaugam in foaia de stil urmatorul cod:
.absolut {position:absolute; top:20px; left:25px; }
.relativ {position:relative; top:10px; left:5px; }

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Controale de pozitionare

Last accessed pages

  1. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (6229)
  2. Butterfly Kyodai (10277)
  3. Mystic India Pop (1478)
  4. Zuma Deluxe (6625)
  5. Articolul din limba engleza - The article (3634)

Popular pages this month

  1. Bubbles3 (3985)
  2. Gramatica limbii engleze - Prezentare Generala (3583)
  3. Butterfly Kyodai (2550)
  4. Jocuri Mahjong (1631)
  5. Jocuri Zuma (1368)