Valori negative în poziționarea CSS
Proprietățile pe care le-am studiat top, right,
bottom și left pot lua
nu numai valori pozitive, ci și negative.
Să analizăm câteva exemple.
Exemplul
În exemplul următor, elementul este poziționat absolut
față de părintele său și se află în poziția
0 de sus, 0 din stânga:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Exemplul
Acum să mutăm elementul în poziția
-20px de sus, -30px din stânga:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
În următorul exemplu, blocul verde este centrat pe
ecran folosind margin, iar
blocurile roșii sunt poziționate relativ
la acesta. Reproduceți pagina după
exemplul dat:
