Poziționarea absolută fără coordonate în CSS
De fapt, specificarea coordonatelor în poziționarea
absolută nu este obligatorie. Dacă unui element
îi scriem pur și simplu position cu valoarea
absolute, atunci el va deveni poziționat absolut,
dar va rămâne în același loc în care
se afla. În acest caz, toate celelalte elemente se vor
comporta ca și cum elementul nostru nu există
și se pot suprapune peste el.
Să ne uităm la exemple.
Exemplul
Pentru început, să facem trei blocuri fără poziționare și între ele un text:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exemplul
Și acum să adăugăm blocului verde absolute.
Ca rezultat, acest bloc va rămâne pe loc,
iar toate elementele de dedesubt se vor comporta ca și cum
elementul nostru nu există și se vor suprapune peste el:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exemplul
Și acum să adăugăm proprietatea left,
fără a adăuga poziție pe verticală. Ca rezultat,
pe orizontală blocul nostru se va poziționa la valoarea
specificată, iar pe verticală - va rămâne
acolo unde era:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* adăugăm poziție pe orizontală */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exemplul
Acum să adăugăm, dimpotrivă, proprietatea
top, fără a adăuga poziție pe orizontală.
Ca rezultat, pe verticală blocul nostru se va poziționa
la valoarea specificată, iar pe orizontală -
va rămâne acolo unde era:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* adăugăm poziție pe verticală */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
