Voit määrittää alueelle tai elementille sijoittelun tyyppiä. Tätä varten käytetään position-ominaisuutta. Tämä ominaisuus määrittelee, miten elementti lopulta sijoitetaan. Yhteensä on neljä erilaista sijoittamisvaihtoehtoa.
• static – mitään erityistä sijoittelua ei tapahdu ja normaali tekstivirta säilyy.
• relative – suhteellinen sijoittaminen, joka noudattaa elementin normaaliposition tai alkuposition.
• absolute – absoluuttinen sijoittaminen ylä-, ala-, vasen- ja oikea-ominaisuuksien avulla. Absoluuttisesti sijoitetut elementit ovat normaalin tekstivirran ulkopuolella. Absoluuttinen sijoitus lasketaan suhteessa vanhemman elementin reunoihin (mutta vain, jos sillä ei ole position: static -ominaisuutta).
• fixed – elementti sijoitetaan absoluuttisesti. Selaimessa vieritettäessä elementti pysyy paikallaan.
Ensimmäiset kaksi vaihtoehtoa mahdollistavat joustavan sijoittelun. Tässä elementit sijoitetaan toisiinsa nähden. Seuraavat kaksi esimerkkiä havainnollistavat, miltä tämä sijoittelutapa voisi näyttää:
• Elementti 2 sijoitetaan 30 pikseliä siirrettynä elementin 1 suhteen.
• Elementti 2 sijoitetaan elementti 1 taakse.
Erilaista on tilanne absoluuttisen ja staattisen sijoittelun kanssa. Näillä voidaan sijoittaa elementtejä hyvin tarkasti määriteltyihin paikkoihin. Sijoitusohjeet perustuvat ylemmän vanhempielementin tai selainikkunan reunoille. Esimerkki:
• Elementti 1 sijoitetaan tarkalleen 30 pikseliä oikealta ja 20 pikseliä ylhäältä selainikkunaan nähden.
Alla esitellään vielä tarkemmin erilaiset sijoittamisvaihtoehdot. Ennen sitä kuitenkin huomautus: Elementtien sijoittelun yhteydessä tärkeässä roolissa on niin kutsuttu leijuminen. Käsittelen tätä tärkeää CSS-periaatetta seuraavassa opetusohjelmassa. Pääsääntöisesti leijumalla tarkoitetaan, miten sivun elementit virtaavat dokumentissa. Elementtejä puristetaan mahdollisimman pitkälle johonkin tiettyyn suuntaan. Sijoittelun tyyppien avulla voidaan määrittää nimenomaisesti elementtien virtaus.
Suhteellinen sijoitus
Käyttämällä suhteellista sijoittelua position: relative tapahtuu kaksi asiaa:
• Laatikko siirretään normaalista virrastaan.
• Elementin alkuperäinen paikka varataan.
Varaamalla alkuperäisen paikan muut elementit käyttäytyvät niin, kuin elementti olisi todellisuudessa edelleen paikallaan.
Esimerkki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Laatikko 1</div>
<div>Laatikko 2</div>
<div>Laatikko 3</div>
</body>
</html>Tässä määriteltiin kolme laatikkoa.
Laatikot 2 ja 3 eivät saaneet sijoitusohjeita, joten ne seuraavat normaalia dokumenttivirtaa. Laatikko 1 sen sijaan sijoitettiin suhteellisesti. Tämän seurauksena laatikot 2 ja 3 eivät kärsi mitään laatikko 1:stä. Tämä siis ei vaikuta näiden laatikoiden sijoitukseen. Ohjeiden top, bottom, left ja right avulla laatikoiden sijoittaminen tapahtuu. Suhteellisessa sijoittelussa lähdetään liikkeelle elementin alkuperäisestä paikasta dokumenttivirrassa (flow).
• top: 25px – laatikko siirretään 25 pikselillä alaspäin. Ylhäällä laatikon normaalissa paikassa sijaitsee siis 25 pikseliä.
• right: 25px – laatikko siirretään 25 pikselillä vasemmalle. Oikealla laatikon normaalissa paikassa sijaitsee siis 25 pikseliä.
Pikseliarvot tulee nähdä suhteessa alkuperäiseen paikkaan. Arvot määrittävät, minne arvo lisätään, eli ylös ja oikealle. Tämä näkökulma on tärkeä. Ohjeet eivät siis määrittele, minne laatikko siirretään.
Absoluuttinen sijoittaminen
Jatketaan absoluuttisella sijoittelulla. Tämä sijoittamistyppi poistaa elementin täysin virrasta. Muut sivun elementit käyttäytyvät kuin elementtiä ei olisi olemassakaan.
Esimerkki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Laatikko 1</div>
<div>Laatikko 2</div>
<div>Laatikko 3</div>
</body>
</html>Tässäkin määriteltiin kolme laatikkoa. Laatikko 1 on sijoitettu absoluuttisesti.
Eri kuin suhteellisessa sijoittelussa, laatikolle 1 ei ole varattu tilaa. Laatikot 2 ja 3 siirtyvät ylöspäin.
Sijoitusohjeet top, right, bottom tai left eivät enää perustu laatikon alkuperäiseen paikkaan virrassa. Kaikki ohjeet viittaavat nyt lähimpään ympäröivään elementtiin, joka on sijoitettu relative, absolute tai fixed. Mikäli ympäröivää elementtiä ei ole, sijoittuminen tapahtuu suhteessa dokumenttipuun ylimpään elementtiin, eli html.
Asettelu kohteella fixed
Käyttämällä position: fixed voi kiinnittää elementtejä. Tässä on esimerkki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Vain lyhyeksi aikaa uusin opetusohjelma tai videotreeni on nähtävissä verkossa tai sisältö Lataa-kategoriasta on pisteetön. Lue lisää täältä ...</p>
</body>
</html>Kiinnitetty laatikko ei vierity, vaan pysyy aina sille määritetyssä paikassa.
Kiinnitetyille laatikoille ympäröivä elementti on aina selainikkuna.
Ottakaa huomioon, että varsinkin vanhemmissa selaimissa voi olla merkittäviä ongelmia elementtien kiinnittämisen kanssa. Esimerkiksi IE6 ei välttämättä tee mitä sen pitäisi tehdä. Jos haluatte optimoida sivustonne myös tälle selaimelle, teillä on nyt kaksi mahdollisuutta:
• Luopua kiinnitetyistä laatikoista.
• Käyttää hakkereita IE:lle.
Jos haluatte käyttää hakkeroita, suosittelen sivustoa http://thestyleworks.de/tut-art/iewinfixed.shtml. Siellä näytetään pienen JavaScriptin avulla, miten kiinnitetyt laatikot saadaan toimimaan myös tällä selaimella.
