Negativne vrednosti pri pozicioniranju u CSS
Svojstva top, right,
bottom i left koja smo naučili mogu da primaju
ne samo pozitivne, već i negativne
vrednosti. Hajde da pogledamo na primerima.
Primer
U narednom primeru element se apsolutno pozicionira
u odnosu na svog roditelja i stoji na poziciji
0 odozgo, 0 s leva:
<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;
}
:
Primer
A sada hajde da pomerimo element na poziciju
-20px odozgo, -30px s leva:
<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;
}
:
U narednom uzorku zeleni blok stoji u
centru ekrana pomoću margin, a
crveni blokovi se pozicioniraju u odnosu na
njega. Ponovite stranicu prema
datom uzorku:
