Negatiewe waardes vir posisionering in CSS

Die eienskappe top, right, bottom en left wat ons bestudeer het, kan nie slegs positiewe nie, maar ook negatiewe waardes aanneem. Kom ons kyk na voorbeelde.

Voorbeeld

In die volgende voorbeeld word die element absoluut geposisioneer relatief tot sy ouer en staan op die posisie 0 van bo, 0 van links:

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

Voorbeeld

En nou, laat ons die element skuif na die posisie -20px van bo, -30px van links:

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

In die volgende voorbeeld staan die groen blok in die middel van die skerm met behulp van margin, en die rooi blokke word relatief tot dit geposisioneer. Herskep die bladsy volgens die gegewe voorbeeld: