Layoutin määrittely position-ominaisuudella

Position-ominaisuus

Layoutin rakentamisessa float-elementin ohella erityisen hyödyllinen on position. Ominaisuudelle annetaan arvoksi elementin sijoittelu

1. suhteessa sen luonnolliseen sijaintiin (relative)
2. suhteessa koko dokumenttiin (absolute)
3. suhteessa selainikkunaan (fixed) – elementti pysyy paikallaan, vaikka sivua vieritetään TAI
4. luonnollisella paikallaan (static)

Tätä ominaisuutta käytetään yleensä aina yhdessä sijainnista kertovien ominaisuuksien left, top, right ja bottom kanssa. Sijaintiominaisuudet määrittävät elementin reunan etäisyyden sen sisältävän elementin/dokumentin/selainikkunan reunasta.

Arvoilla absolute ja fixed sijoiteltu elementti poistuu samalla elementtien "luonnollisesta virrasta". Toisin sanottuna niiden jälkeen html-dokumentissa tuleva sisältö sijoittuu aivan kuin näitä elementtejä ei olisi olemassakaan.

Absoluuttinen sijoittelu (absolute)

Esimerkki. Määritellään sivuston kielivalinnat sisältävä div-elementti (#lang) sijaitsemaan sivu oikeassa ylänurkassa 10 pikselin päässä reunoista.

#lang {
position:absolute;
top:10px;
right:10px
}

Huom! Tämän olisi voinut tehdä myös määrityksellä float:right ja määrittämällä tyylissä marginaalit oikealle ja ylös.

Tehtävä 1 

• Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
• Lisää sivustolle taustakuva, joka toistuu oikeassa reunassa pystysuunnassa.
• Määritä otsikon jälkeen tulevien div-elementtien (#laatikot) absoluuttinen sijainti niin, että oikealle jää taustakuvan verran tilaa.

Tehtävä 2

• Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
• Määritä otsikkopalstalle (#otsikko) absoluuttinen korkeus ja pystypalstoille (#navi ja #sisalto) absoluuttiset leveydet makusi mukaan. (Ks. lisätietoa mittayksiköistä).
• Määritä pystypalstoille absoluuttiset sijainnit suhteessa dokumentin yläreunaan ja sivuihin nykyisen float-ominaisuuteen perustuvan asemoinnin sijaan.

Sijoittelu suhteessa selainikkunaan (fixed)

Esimerkki. Sivulla on pystynavigaation sisältävä div-elementti, joka halutaan sijoittaa vasempaan reunaan niin, että se pysyy paikallaan, vaikka sivua vieritetään.

#navi {
position:fixed;
top:0;
left:0;
}

Tehtävä 3

• Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
• Muokkaa sivun otsikon sisältävän div-elementin tyyliä (#otsikko) niin, että otsikko pysyy paikallaan, vaikka sivun sisältöä vieritetään. Määritä otsikon leveydeksi 100 %.
• Muokkaa vielä otsikon jälkeen tulevan sisällön (#laatikot) tyyliä niin, että se ei jää otsikon alle. Tätä tarkoitusta varten sinun tulee (1) ensin määrittää otsikon sisältävälle div-elementille jokin korkeus, jota (2) voit sitten käyttää #laatikot-tyylissä ylämarginaalina TAI määritellä sen avulla #laatikot-tyylin absoluuttisen sijainnin.

Materiaalin on laatinut Tanja Välisalo.