Puteti determina tipul de poziționare pentru o zonă sau un element. Pentru aceasta se utilizează proprietatea position. Această proprietate indică modul în care un element ar trebui poziționat în final. În total, există patru variante diferite de poziționare disponibile.
• static – nu se realizează nicio poziționare specială și are loc un flux normal al textului.
• relative – are loc o poziționare relativă, care se orientează pe poziția normală sau inițială a elementului.
• absolute – are loc o poziționare absolută folosind proprietățile top, bottom, left și right. Elementele poziționate absolut se află în afara fluxului normal al textului. Poziția absolută se calculează în raport cu marginile elementului părinte (dar doar dacă acesta nu are proprietatea position: static).
• fixed – elementul este poziționat în mod absolut. La derularea paginii, elementul rămâne fixat.
Primele două variante permit o poziționare variabilă. Aici, elementele sunt poziționate în raport unul cu celălalt. Următoarele două exemple arată cum ar putea arăta această poziționare:
• Elementul 2 este poziționat la 30 de pixeli față de elementul 1.
• Elementul 2 este poziționat în spatele elementului 1.
Situația este diferită cu fixed și static. Prin ele, elementele pot fi poziționate în locuri foarte precise. Specificațiile de poziționare se referă la elementul părinte sau la fereastra browserului. Un exemplu:
• Elementul 1 este poziționat exact la 30 de pixeli de marginea dreaptă și 20 de pixeli de marginea de sus a ferestrei browserului.
În continuare, variantele diferite de poziționare vor fi prezentate în detaliu. Înainte de aceasta, însă, o mențiune: În contextul poziționării elementelor, float-ul joacă un rol important. Acest principiu important al CSS va fi explicat detaliat în următorul tutorial. În esență, float-ul se referă la modul în care elementele site-ului web curg în document. Elementele sunt împinse cât mai mult posibil în direcția corespunzătoare. Prin modul de poziționare se poate determina explicit fluxul elementului.
Poziționarea relativă
Prin utilizarea poziționării relative cu position: relative se întâmplă două lucruri:
• Caseta este mutată din fluxul său normal.
• Locul inițial al elementului este rezervat.
Datorită rezervării locului inițial, celelalte elemente se comportă de parcă elementul ar fi încă prezent la locul său.
Un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Casetă 1</div>
<div>Casetă 2</div>
<div>Casetă 3</div>
</body>
</html>Aici au fost definite trei casete.
Caseta 2 și 3 nu au primit nicio instrucțiune de poziționare. Prin urmare, ele urmează fluxul normal al documentului. În schimb, caseta 1 a fost poziționată relativ. Astfel, casetele 2 și 3 nu sunt deloc afectate de caseta 1. Astfel, casetele 2 și 3 nu ocupă locul casetei 1. Prin specificațiile top, bottom, left și right se realizează poziționarea casetelor. În cazul poziționării relative, se pleacă de la poziția inițială în fluxul documentului (Flow).
• top: 25px – caseta este mutată cu 25 de pixeli în jos. În poziția normală a cutiei, sunt inserați 25 de pixeli deasupra.
• right: 25px – caseta este mutată cu 25 de pixeli la stânga. În poziția normală a cutiei, sunt inserați 25 de pixeli la dreapta.
Valorile în pixeli sunt de văzut în raport cu poziția inițială. Specificațiile stabilesc unde este inserată valoarea, adică sus și la dreapta. Acest aspect este crucial. Specificațiile nu stabilesc unde este mutată cutia.
Poziționarea absolută
Mergem mai departe cu poziționarea absolută. Această modalitate de poziționare scoate complet elementul din flux. Celelalte elemente de pe pagină se comportă de parcă elementul nu ar fi deloc prezent.
Un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Casetă 1</div>
<div>Casetă 2</div>
<div>Casetă 3</div>
</body>
</html>Aici, de asemenea, au fost definite trei casete. Cazeta 1 este poziționată absolut.
Spre deosebire de poziționarea relativă, pentru caseta 1 nu este rezervat niciun loc. Casetele 2 și 3 se deplasează în sus.
Specificările de poziționare top, right, bottom sau left nu mai se bazează acum pe poziția inițială a cutiei în flux. Mai degrabă, specificațiile se referă la elementul înconjurător cel mai apropiat poziționat cu relative, absolute sau fixed. Dacă nu există niciun element înconjurător, poziționarea se realizează relativ la cel mai de sus element al arborelui documentului, adică html.
O poziționare cu fixed
Cu position: fixed elementele pot fi fixate. Iată și un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Efectul de cioburi Partea 1</div>
<p>Pentru o perioadă scurtă de timp, cea mai nouă lecție sau instruire video este disponibilă gratuit pentru vizualizare online sau conținutul din categoria de descărcare. Află mai multe aici ...</p>
</body>
</html>Boxa fixată nu se deplasează odată cu scroll-ul, ci rămâne întotdeauna în poziția ei fixată.
Pentru cutiile fixate, elementul înconjurător este mereu fereastra browser-ului.
Vă rugăm să rețineți că există probleme semnificative în special în legătură cu fixarea elementelor în browserele mai vechi. De exemplu, IE6 nu face aici ceea ce ar trebui să facă în mod normal. Cei care doresc/sunt obligați să-și optimizeze site-urile și pentru acest browser au acum două opțiuni:
• Renunțați la cutiile fixate.
• Folosiți hack-uri pentru IE.
Dacă doriți să folosiți un hack, vă recomand să accesați pagina http://thestyleworks.de/tut-art/iewinfixed.shtml. Acolo este prezentat cum să obțineți cutii fixate și pentru acest browser, folosind un mic script JavaScript.
