Elementtien absoluuttinen sijoittelu CSS:ssä

Tässä oppitunnissa käsittelemme elementtien absoluuttista sijoittelua. Sen avulla voidaan sijoittaa elementtejä sivun määriteltyjen koordinaattien mukaan. Esimerkiksi elementti voidaan sijoittaa kohtaan 100px sivun ylälaidasta ja 200px vasemmalta. Elementti siirtyy sinne huolimatta siitä, mitä muuta siellä saattaa olla, ja asettuu vain muiden päälle. Sanotaan, että tällöin elementti putoaa ulos dokumentin normaalista virtauksesta: kaikki muut elementit käyttäytyvät kuin elementtiämme ei olisi olemassa.

Jotta elementistä tehdään absoluuttisesti sijoiteltu, sille on asetettava ominaisuus position arvoon absolute. Tämän ominaisuuden lisäksi tarvitaan kaksi muuta: toinen määrittää pystysuoran koordinaatin ja toinen vaakatason koordinaatin.

Pystysuunnalle on asetettava joko ylä- tai alaulkokoukku. Yläulkokoukun asettaa ominaisuus top ja alaulkokoukun ominaisuus bottom. Vaakatasolle on asetettava joko vasen tai oikea ulkokoukku. Vasemman ulkokoukun asettaa ominaisuus left ja oikean ulkokoukun ominaisuus right.

Katsotaanpa esimerkein.

Esimerkki

Aluksi tehdään vain kaksi lohkoa ilman sijoittelua (huomaa, että elementit eivät ole ikkunan reunassa kiinni, koska body:lla on oletusarvoisesti margin):

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

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

Результат:

Esimerkki

Annetaan nyt vihreälle lohkolle absoluuttinen sijoittelu asettamalla se kohtaan ylhäällä 150px ja vasemmalta 100px:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Esimerkki

Asetetaan nyt vihreä lohko kohtaan 0px ylhäältä ja 0px vasemmalta:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Esimerkki

Asetetaan nyt vihreä lohko kohtaan 0px ylhäältä ja 0px oikealta:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Esimerkki

Asetetaan nyt vihreä lohko kohtaan 0px alhaalta ja 0px oikealta:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Esimerkki

Asetetaan nyt vihreä lohko kohtaan 0px alhaalta ja 0px vasemmalta:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

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