Taso0
Taso1
Taso2
Taso3
CSS eli Porrastetut tyyliarkit saavat aivan uuden merkityksen...
Tarkastelkaamme nyt käytännössä <div> -elementillä luotua tasoa. Jotta <div> -elementistä tulisi W3C:n mukainen layer, tulee siinä olla esim. seuraavat määritteet:
<div id="taso3"
style="position:absolute;
left:175px; top:700px;
width:150px; height:150px;
z-index:2">Taso3
</div>
Alla neljä, hieman päällekkäin olevaa, tasoa.
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Huomaa, että tavallinen teksti jää tasojen alle!
Seuraavaksi luomme kaksi tasoa 'ulompi' ja 'sisempi'. Näistä taso 'sisempi' sijaitsee tason 'ulompi' sisällä. Huomaa, että tason 'sisempi' paikka lasketaan nyt tason 'ulompi' suhteen. Käytännössä kaksi tasoa voidaan laittaa sisäkkäin siis näin:
<div id="ulompi" style="position:relative;
left:20%;
width:100px;
height:100px;
z-index:1">
Ulompi
<div id="sisempi" style="position:absolute;
left:20px; top:20px;
width:60px; height:40px;
z-index:2">
Sisempi
</div>
</div>
Määritellään tasoille vielä vähän väriä ja reunuksia, jolloin ne on helpompi havaita ja tulos näyttää tältä:
Kannattaa pitää mielessä, että vanhemmat selaimet (kuten NN 4.x) eivät tätä ymmärrä. Ne kyllä tunnistavat tasot, mutta taso 'sisempi' sijoitetaan dokumentin vasemman yläreunan suhteen, jolloin tulos on tietysti täysin väärä.
Layer on yksi CSS2:n parhaiten toimivista ominaisuuksista, varsinkin arvolla 'absolute'. Layer kuului varhaiseen CSS-P määrittelyyn, joka sittemmin hyväksyttiin CSS2 määrittelyyn. Jo selainten nelosversiot osaavat asettaa esim. <div> -elementin kellumaan muiden elementtien päälle, jos arvona on 'absolute'.
Z-index asettaa päällekkäin menevät tasot järjestykseen. Jos tasoja käytetään ilman z-index -määritystä tai arvolla 'auto', niistä ensin määritelty tulee alimmaiseksi ja viimeksi määritelty tulee päällimmäiseksi.
Myös z-index kuului jo CSS-P määrittelyyn, joten se toimii jo selainten nelos versioissa.
(Valitsimilla #p1, #p2 ka #p3 on myös arvo 'position: relative'
sekä omat taustavärit sekä koot)
Oletusarvo: #p1, #p2, #p3 { z-index: auto}
CSS-sääntö: #p1{z-index:3} #p2{z-index:2} #p3{z-index:1}
Seuraavaksi tutkitaan, mitä tapahtuu kun div-elementin (350px 50px) sisään...
<p>
</p>
...laitetaan sitä suurempi <p class="over"> -elementti (400px 60px).
Hieman yllättäen Opera ei osaa luoda elementtiin vierityspalkkeja arvoilla 'auto' ja 'scroll', vaikka sen CSS2-tuki on muuten hyvä.
Visible on oletusarvo ja aiheuttaa sen, että <p> -elementti mahdutetaan väkisin <div> -elementin sisään.
.over { overflow: visible}
<p class="over">Tässä tekstikappale over, se on kooltaan suurempi kuin ympäröivä elementti. Ylimenevän tekstin kohtalo määritellään siis 'overflow' ominaisuudella.</p>
Hidden aiheuttaa sen, että <div> -elementin yli menevää osaa ei näytetä.
.over { overflow: hidden }
Scroll luo <div> -elementille vierityspalkit, joiden avulla sen sisällä oleva <p> -elementti saadaan näkyviin. Huomaa että vierityspalkit tulevat sekä alhaalle ja sivulle, vaikka niitä ei tarvittaisi.
CSS-sääntö: .over { overflow: scroll }
<p class="over">Tässä tekstikappale over, se on kooltaan suurempi kuin ympäröivä elementti. Ylimenevän tekstin kohtalo määritellään siis 'overflow' ominaisuudella.</p>
Auto luo <div> -elementille pysty ja/tai vaaka vierityspalkit, vai tarvittaessa.
CSS-sääntö: .over { overflow: auto }
<p class="over">Tässä tekstikappale over, se on kooltaan suurempi kuin ympäröivä elementti. Ylimenevän tekstin kohtalo määritellään siis 'overflow' ominaisuudella.</p>