Elementtien suhteellinen sijoittelu CSS:ssä

Suhteellinen sijoittelu asetetaan käyttämällä arvoa relative ominaisuudelle position. Tällainen sijoittelu mahdollistaa elementtien siirtämisen nykyisestä sijainnistaan annetun määrän. Samaan aikaan kaikki muut sivun elementit kuvittelevat, että elementti on siellä, missä se alun perin oli. Toisin sanoen tällaisessa sijoittelutyypissä elementti ei poistu normaalista virtauksesta.

Siirrot nykyisestä sijainnista asetetaan ominaisuuksilla top, right, bottom ja left.

Esimerkki

Aluksi tehdään vain kaksi lohkoa ilman sijoitusta:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Esimerkki

Lisätään nyt ensimmäiselle lohkolle relative. Tästä ei vielä muutu mikään, koska emme ole määrittäneet lohkon siirtoa:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Esimerkki

Siirretään nyt lohkoamme 30px ylhäällä, antamalla sille ominaisuus top. Samaan aikaan kaikki muut elementit käyttäytyvät kuin lohkomme olisi edelleen siellä, missä se oli aluksi:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Esimerkki

Siirretään myös lohkoamme 40px vasemmalle, antamalla sille ominaisuus left:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	left: 40px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Esimerkki

Negatiiviset arvot ominaisuuksille top, right, bottom ja left siirtävät vastakkaiseen suuntaan. Esimerkiksi positiivinen arvo top siirtää alas, ja negatiivinen - ylös.

Siirretään toista lohkoamme 40px ylös, antamalla sille negatiivinen arvo ominaisuudelle top:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Käytännön tehtävät

Annettu seuraavat lohkot:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
teksti teksti teksti

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Siirrä näitä lohkoja suhteellisen sijoittelun avulla seuraavalla tavalla: