[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 11. Mikä on CSS2:n Visuaalinen muotoilumalli > CSS2:n asemointimalli (position model) (jakso 2/4)

CSS2:n asemointimalli (position model)

Aiheet

Yleistä elementtien asemoinnista

CSS2:ssa on erityinen asemointimalli (position model). Tässä mallissa position:static merkitsee tavanomaista asemointia jos mitään varsinaiseen asemointiin liittyviä ominaisuuksia ei ole annettu. Aino järkevä käyttö tälle arvolle on poikkeustilanteissa ottaa pois käytöstä muut asemointiarvot. Muut asemointityypit (suhteellinen, absoluuttinen ja kiinteä - relative, absolute ja fixed) antavat mahdollisuuden kerrostettujen elementtien käytölle (layered elements). Asemoidut elementit luovat uuden säilytinlohkon (containing block) sisään jääville elementeille.

Jotta kerrostettujen elementtien pinotasoa (stack level) voitaisiin kontrolloida käytetään z-index ominaisuutta. Mitä suurempi numeerinen arvo, sitää korkeammalla tasolla elementti on suhteessa toisiin elementteihin, joilla on myös z-index ominaisuus tai ominaisuutta ei ole määritelty lainkaan (elementit, joilla on z-index:3 asemoidaan korkeammalle kuin elementit, joilla on z-index:1 jne.; jos asemoitu elementti on toisen asemoidun elementille sisällä arvot koskevat vain suhteessa toisiin saman elementin sisällä oleviin elementteihin; suhteessa muihin elementteihin niillä on sama arvo kuin emoelementillä).

W3C: CSS2: 9 Visual formatting model[Pw], 10 Visual formatting model details[Pw]

Kun elementeillä on position:relative asemoidut elementit sijoitetaan suhteessa normaaliin eli staattiseen asemointiin. Yleisimmin käytetty asemointitapa on position:absolute. Tällä tavalla asemoitujen elementtien sijainti lasketaan yleensä alkusäilytinlohkon (initial containing block) peruteella eli juurielementistä käsin. Suhteellisesti ja absoluuttisesti asemoitujen elementtien suhteen esi-isäelementtien asemoinneilla on vaikutusta koska laskeminen aloitetaan lähimmästä asemoidusta esi-isäelementistä käsin. Siksi absoluuttisesti asemoidut elementit eivät ole aina asemoitu juurielementin mukaant. Absoluuttisesti asemoitujen elementtien paikka tulisi laskea säilytinelementin täytenurkista (padding edges), jolloin säilytinelementin margin ja border ominaisuuksilla on vaikutus, mutta padding ominaisuudella ei.

Elementit, jotka asemoidaan position:fixed sijoitetaan suhteessa näyttöporttiin (viewport) eli selainikkunaan, jossa sivu sijaitsee. Koska kiinteästiasemoitujen elementtien laskemiskohdilla on aina samat sijainnin toisin kuin muissa asemointityypeissä muiden elementtien asemoinneilla ei ole vaikutusta kiinteästi asemoitujen elementtien sijainteihin. Kiinteästi asemoidut elementit, jotka ovat kiinteästi asemoitujen elementtien jälkeläiselementtejä aloittavat aina sisään sijoitettavien elementtien asemointipaikkojen laskemisen aivan alusta.

Absoluuttisesti ja kiinteästi asemoidut elementit ovat kokonaan pois elementtien normaalista asettelusta. Siksi tällä tavoin asemoitujen elementtien leveys ja korkeus ei millään tavoin vaikuta muiden elementtien sijainteihin tai mitoituksiin. Absoluuttisesti tai kiinteästi asemoitujen elementtien mitoituksia ei voi määritellä prosentuaalisesti suhteessa staattisesti asemoituihin emoelementteihin.

<body>
<div style="position:static"><div style="position:absolute; height:500px; width:500px; top:0; left:0"</div></div>

<!-- staattisesti asemoidun elementin korkeus on nolla --> <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0"</div></div>
<!-- absoluuttisesti asemoidun elementin korkeus ja leveys tulisi laskea HTML elementin perusteella --> -->

Absoluuttisesti asemoidut elementit

Alla on esimerkki tyypillisestä absoluuttisesti asemoidun elementin käyttötavasta ([M][S][Pw]):

...
html, body {margin:0; padding:0; border-width:0}
...

<DIV style="position:absolute; top:10px; left:10px; z-index:5; width:400px;">

... </DIV>
<IMG src="./Taulut/koneet.gif" style="position:absolute; left:20px; top:50px; z-index:3">
<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; left:100px; top:20px;z-index:4">
<DIV style="position:absolute; top:290px; left:10px; z-index:5; width:400px;">
<DIV style="border:1px solid black; padding: 5px">...

...</DIV></DIV>

Suositukseni:

  1. Asemoinnit määritellään aina Web-sivun vasemmasta yläkulmasta left ja right ominaisuuksia käyttäen kuten edellä ollessa esimerkissä on toimittu.

  2. Asemoiduille elementeille on aina määritelty ominaisuus z-index ja tarvittaessa myös muille elementeille.

  3. Elementille BODY ja säilytinelementeille ominaisuudet margin-top, margin-left, padding-top, padding-left, border-left-width ja border-top-width on määritelty nollaksi. Käyttämällä padding-right jne. tulee dimensio-ongelmia[S]. Paras lopputulos saadaan, jos reunukset jne. määritellään ei-asemoiduille jälkeläiselementeille.

  4. Asemoduilla elementeillä on aina pikselimääräiset height ja width ominaisuudet. Samalla varmistetaan, että sisältö mahtuu annettujen arvojen sisään ilman overflow ominaisuuden antamista.

  5. Position:absolute toimii luotettavimmin oikein, jos asemoidut elementit ovat aina BODY-elementin lapsielementtejä. Jos elementtejä sijoitetaan sisäkkäin, sisemmän elementin olisi hyvä pysyä ulomman sisäpuolella.

  6. Absoluuttisesti asemoituja elementtejä ei pitäisi käyttää sivuilla, jotka ovat siten vaakatasossa skaalautuvia, että asemoidut elementit voivat peittää asiasisällön.

  7. Vältä asettamasta asemoituja elementtejä lomakekontrollielementtien ja upotettujen visuaalisten objektien yläpuolelle.

  8. Älä asemoi taulukkosoluja.

Absoluuttisesti asemoituja elementtejä koskevia selainkohtaisia huomautuksia:

  1. Opera Software mukaan sisäkkäiset ratkaisut (esim. <div style="position:absolute; top:50px;left:50px"> ... <div style="position:absolute; top:20px;left:20px"> ... </div></div>) toimivat MS IE 5.0:ssa virheellisesti.

    En voinut verifioida tätä Windows-selaimia koskevaa väitettä. Sen sijaan huomasin, että MS IE 5.x Mac ottaa virheellisesti huomioon ei-asemoitujen esi-isäelementtien marginaalit. Havaitsein, että Opera 4.x-5.x laskee joskus sisemmät asemoidut elementit virheellisesti ottamatta huomioon ulompien elementtien asemointeja. Opera 6.x:n kohdalla havaitsin, että position:absolute + sisäkkäin relativiisesti asemoiduista elementeistä asemointi ei toiminut sisimmille elementeille.

  2. Ominaisuus bottom toimii virheellisesti kaikissa selaimissa. Jos mitään säilytinelementtiä ei ole määritelty selaimet määrittelevät asemoinnin vierittämättömän selainikkunan alalaidan perusteella. right ei toimi kaikissa position:absolute tukevissa selaimissa.

  3. MS IE 4.x Windows sisäkkäisen elementin asemointi ei toimi, jos elementti on sijoitettu kokonaan asemoidun säilytinelementin ulkopuolelle.

  1. Selaimet määrittelevät leveyden ja korkeuden eri lailla mikäli niitä ei ole määritelty. Joillakin Opera 7.x -selaimilla leveys ja korkeus ovat nolla, jos niitä ei ole eksplisiittsesti määritelty. Valikot voivat mennä kasaan.

  2. MS IE 5.x Mac ja Mozilla Gecko -selaimet eivät osaa asemoida taulukkosoluja.

  3. Prosenttiarvoiset width ja height ominaisuudet eivät toimi oikein MS IE - ja Opera-selaimissa. MS IE laskee asemoidut elementit emoelementin perusteella vaikka emoelementti olisi staattisesti asemoitu. Jos emoelementillä ei ole tarkkaa korkeusarvo, arvo on yhden tekstirivin korkuinen. Opera ottaa height ominaisuuden staattisesti määritellyltä emoelementiltä (jos emoelementillä ei ole height ominaisuutta korkeus on näyttöportin korkeus vähennettynä vaakavierityspalkille varatun tilan verran). Opera 7.x laskee width oikein HTML elementistä käsin näyttöportin perusteellla tilanteissas, jotka muistuttavat alla olevaa esimerkkiä:

    html {width:400px; width:400px}...
    <body>
    <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0; background-color:yellow"</div></div>
  1. Vain Mozilla Gecko -selaimet laskevat asemoinnit HTML-elementin täyttöreunojen perusteella. MS IE 5.x+ ja Opera 7.0 Beta 1 Windows browsers jättävät huomioimatta marginaalin. MS IE 5.x Mac -selain ottaa toisinaan huomioon HTML-elementille annetut täytteet. Vanhemmat Opera-selaimet hylkäävät sekä marginaalit että reunukset kuten myös MS IE 4.x Windows (jälimmäinen selain hylkää kaikki em. ominaisuudet). Tein asiasta testisarjan[S]. Tavanomaisissa tilanteissa Opera 4.x-6.x laskee asemoidut elementit reunusten kulmista (border edges) käsin.

  2. Erään s-postin mukaan MS IE 5.0 Mac aloittaa laskemisen toisinaan BODY elementistä käsin. Tapauksessa BODY-elementille oli annettu padding-left:100px absoluuttisesti asemoidut elementit siirtyivät 100px oikealle (testisarja[S], jossa valikon pitäisi olla aina sivun vasemmassa yläkulmassa).

  1. Opera tarvitsee asemoiduille elementeille sekä vaaka- että pystyarvot (MS IE käyttää asemoinnin oletuksena vasenta yläkulmaa).

  2. MS IE 5.x+ Windows (paitsi MS IE 6.0 standard-compliant -moodissa[S]) tarvitsee asemoitujen elementtien siäsällä oleville TD elementeille korkeusarvot. Mozilla Gecko -selaimet tarvitsevat toisinaan ominaisuutta height asemoiduille DIV elementeille. MS IE 4.x Windows näyttää tarvitsevan asemoiduille elementeille aina sekä height että width ominaisuudet.

  3. Asemointi ei aina toimi Netscape 4.x -selaimissa. Tällaisissa tilanteissa täytyy käyttää vastaavia HTML-attribuutteja LAYER tai ILAYER elementeille (ks. esimerkki sivulta, joka käsittelee dynaamisia valikoita[S]). Jos asemoidut elementit ovat täysleveän taulukon taulukkosolujen sisällä kaikki ominaisuudet eivät toimi oikein.

  1. Melkein kaikissa uusissa selaimissa on ongelmana se, että z-index ei toimi kunnolla upotettujen lisäosia vaativien objektien kanssa ja/tai lomakekontrollielementtien kanssa. Operan kohdalla (6.x-sarjaan asti) kyse on mollemista tapauksista ja Konqueror 3.1 kohdalla lomakekontrollielementeistä. MS IE:llä on ongelmaSELECT-elementin kanssa. Uusimissa Mozilla Gecko -selaimissa tätä ongelmaa ei ole. Tosin, jos kerroksilla, jotka on laitettu upotetun elementin päälle on background-color:transparent upotetun objetin emoelementin taustaväri kuultaa läpi ja kerrokset leikkaavat palan upotetusta objektista.

  2. Kaikki CSS2:ta tukevat selaimet eivät tue kaikkia overflow ominaisuuden arvoja. Käsittelen ongelmaa edempänä kun mainitsen position:fixed liittyviä ongelmia.


[Alku]