Neigiamos reikšmės pozicionuojant CSS

Išmoktos savybės top, right, bottom ir left gali priimti ne tik teigiamas, bet ir neigiamas reikšmes. Pažiūrėkime pavyzdžiais.

Pavyzdys

Šiame pavyzdyje elementas yra absoliučiai pozicionuojamas reliatyviai savo tėvinio elemento ir yra pozicijoje 0 viršuje, 0 kairėje:

<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;
}

Pavyzdys

Dabar pastumkime elementą į poziciją -20px viršuje, -30px kairėje:

<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;
}

Šiame pavyzdyje žalias blokas yra centre ekrano, naudojant margin, o raudoni blokai pozicionuojami reliatyviai jo. Pakartokite puslapį pagal pateiktą pavyzdį: