Poziționarea
CSS oferă posibilități pentru poziționarea elementelor, adică putem plasa un element într-un anumit loc pe pagină.
Proprietatea principală care controlează poziționarea în CSS este proprietatea position. Această proprietate poate lua una dintre următoarele valori:
- static: poziționarea standard a elementului, valoarea implicită
- absolute: elementul este poziționat relativ la granițele containerului său, dacă containerul nu are proprietatea position setată la static
- relative: elementul este poziționat relativ la poziția sa implicită. De obicei, scopul principal al poziționării relative nu este de a muta elementul, ci de a stabili un nou punct de ancorare pentru poziționarea absolută a elementelor încorporate în acesta
- fixed: elementul este poziționat relativ la fereastra browserului, ceea ce permite crearea de elemente fixe care nu își schimbă poziția la derulare
Nu se recomandă aplicarea simultană a proprietății float și a oricărui tip de poziționare, cu excepția static (adică tipul implicit).
Poziționare absolută
Zona de vizualizare a browserului are margini superioare, inferioare, drepte și stângi. Pentru fiecare dintre aceste patru margini există o proprietate CSS corespunzătoare: left (margine la stânga), right (margine la dreapta), top (margine la partea de sus a containerului) și bottom (margine jos). Valorile acestor proprietăți sunt specificate în pixeli, em-uri sau procente.
Nu este necesar să setați valori pentru toate cele patru laturi. De obicei, se stabilesc doar două valori - distanța de la marginea de sus (top) și distanța de la marginea stângă (left).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verstare pe blocuri în HTML5</title>
<style>
.header {
position: absolute;
left: 100px;
top: 50px;
width: 430px;
height: 100px;
background-color: rgba(128, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="header"></div>
<p>HELLO WORLD</p>
</body>
</html>Aici, elementul div cu poziționare absolută va fi situat la 100 de pixeli la stânga de marginea zonei de vizualizare și la 50 de pixeli de partea de jos.
Este important de menționat că nu contează ce alte elemente urmează după acest bloc div. Blocul div va fi poziționat relativ la marginile zonei de vizualizare a browserului.
Dacă un element cu poziționare absolută este plasat într-un alt container, care la rândul său are proprietatea position diferită de static, atunci elementul va fi poziționat relativ la marginile containerului:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Poziționare în HTML5</title>
<style>
.outer {
position: absolute;
left: 80px;
top: 40px;
width: 430px;
height: 100px;
border: 1px solid #ccc;
}
.inner {
position: absolute;
left: 80px;
top: 40px;
width: 50px;
height: 50px;
background-color: rgba(128, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Poziționare relativă
Poziționarea relativă se setează de asemenea prin utilizarea valorii relative. Pentru a specifica poziția exactă unde elementul este deplasat, se utilizează aceleași proprietăți top, left, right, bottom:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Poziționare în HTML5</title>
<style>
.outer {
position: relative;
left: 80px;
top: 40px;
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
.inner{
position: absolute;
left: 80px;
top: 40px;
width: 50px;
height: 50px;
background-color: rgba(128, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="outer"><div class="inner"></div></div>
</body>
</html>Proprietatea z-index
În mod implicit, când două elemente se suprapun, elementul care este definit ultimul în codul HTML va fi afișat deasupra celuilalt. Totuși, proprietatea z-index permite modificarea ordinii de suprapunere a elementelor. Această proprietate acceptă un număr ca valoare. Elementele cu o valoare mai mare a acestei proprietăți vor fi afișate deasupra celor cu o valoare mai mică a z-index.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Poziționare în HTML5</title>
<style>
body{
margin:0;
padding:0;
}
.content{
position: relative;
top: 15px;
left: 20px;
width: 250px;
height: 180px;
background-color: #eee;
border: 1px solid #ccc;
}
.redBlock{
position: absolute;
top: 20px;
left:50px;
width: 80px;
height: 80px;
background-color: red;
}
.blueBlock{
position: absolute;
top: 80px;
left: 80px;
width: 80px;
height: 80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<div class="redBlock"></div>
<div class="blueBlock"></div>
</div>
</body>
</html>
Acum vom adăuga un nou regulament la stilul blocului redBlock:
.redBlock{
z-index: 100;
position: absolute;
top: 20px;
left:50px;
width: 80px;
height: 80px;
background-color: red;
}Aici, z-index este 100. Dar nu este obligatoriu să fie numărul 100. Deoarece al doilea bloc nu are un z-index definit și, practic, este egal cu zero, pentru redBlock putem seta orice valoare mai mare decât zero la z-index.
Și acum primul bloc va fi suprapus peste al doilea, nu invers, așa cum era la început:
