Negatiiviset arvot asemointia CSS:ssä

Oppimamme ominaisuudet top, right, bottom ja left voivat ottaa ei vain positiivisia, vaan myös negatiivisia arvoja. Katsotaanpa esimerkein.

Esimerkki

Seuraavassa esimerkissä elementti asemoidaan absoluuttisesti suhteessa sen vanhempaan ja on asemassa 0 ylhäältä, 0 vasemmalta:

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

Esimerkki

Ja nyt siirretään elementti asemaan -20px ylhäältä, -30px vasemmalta:

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

Seuraavassa näytteessä vihreä lohko on keskellä näyttöä käyttäen margin:ia, ja punaiset lohkot asemoituvat suhteellisesti siihen. Toista sivu annetun näytteen mukaisesti: