CSS - Pozitionare
Pozitionarea elementelor este de patru tipuri.
Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare.
Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina care are o pozitie fixa indiferent de celelalte elemente. Cu altea cuvinte elementul pluteste in pozitia stabilita chiar daca dam de rotita mouseului. Folosind valoarea "fixed" elementele se pot suprapune, celelalte elemente comportanduse ca si cand elementul fix nu ar exista.
css.pozitie_fixa {
position:fixed;
top:25px;
right:10px;
}IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE.
Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica
css.pozitionare_relativa {
position:relative;
left:15px;
top:30px;
}Valorile lui top si left pot fi deasemenea negative.
css.pozitionare_relativa{
position:relative;
left:-15px;
top:-30px;
}Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe emente.
html<style type="text/css">
.element_suprapus {
position:relative;
top:-20px;
}
</style>
<h2>Acest element are o pozitionare statica</h2>
<h2 class="element_suprapus">Titlul va fi urcat mai sus fata de pozitia initiala</h2>
<p><strong>Note:</strong> Trebuie mentionat ca spatiul corespunzator elementului, va fi pastarat</p>De multe ori pozitionarea relativa sau div-urile pozitionate relativ sunt folosite ca si container pentru alte divuri sau elemente pozitionate absolut.
Elementele pozitionate absolut vor fi pozitionate in functie de primul alement parinte care are o pozitionare non-statica. Daca nu este gasit un astfel de element, elementul parinte va fi considerat <html>.
Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte elemente se comporta ca si cand elementul pozitionat absolut nu ar exista. In felul acesta se pot suprapune mai multe elemente.
cssp {
position:absolute;
left:200px;
top:200px;
}Cu ajutorul CSS pot fi suprapuse mai multe elemente.
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.
html<html>
<head>
<style type="text/css">
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>Suprapunerea mai multor elemente in CSS</h1>
<img src="imagine.jpg" width="100" height="100" />
<p>Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.</p>
</body>
</html>Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in spatele textului. De aici regula ca un element cu "z-index" mai mare va fi pozitionat in fata unui element cu "z-index" mai mic.