Päivitetty: 22.06.2002 .

taso, z-index, overflow

taso, z-index, overflow

Asemointi

Display

Position

Top, right, bottom left

Flot ja clear

Taso, z-index, overflow

Taso0

C

Taso1

S

Taso2

S

Taso3

 

CSS eli Porrastetut tyyliarkit saavat aivan uuden merkityksen...

taso

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!

<< Alkuun

sisäkkäiset tasot

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ä:

Ulompi
Sisempi

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ä.

<< Alkuun

toimivuus

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'.

  1. Opera 6:  4/4  | NN 6.2:   4/4  | IE 5.5:    4/4

<< Alkuun

z-index

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.

toimivuus

Myös z-index kuului jo CSS-P määrittelyyn, joten se toimii jo selainten nelos versioissa.

auto

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

(Valitsimilla #p1, #p2 ka #p3 on myös arvo 'position: relative' sekä omat taustavärit sekä koot)

Oletusarvo: #p1, #p2, #p3 { z-index: auto}

<div id="p1">Tässä on lohko 1</div>
<div id="p2">Tässä on lohko 2</div>
<div id="p3">Tässä on lohko 3</div>

<kokonaisluku>

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

CSS-sääntö: #p1{z-index:3} #p2{z-index:2} #p3{z-index:1}

<div id="p1">Tässä on lohko 1</div>
<div id="p2">Tässä on lohko 2</div>
<div id="p3">Tässä on lohko 3</div>

<< Alkuun

overflow

Seuraavaksi tutkitaan, mitä tapahtuu kun div-elementin (350px 50px) sisään...

<div>

</div>

<p>

</p>

...laitetaan sitä suurempi <p class="over"> -elementti (400px 60px).

toimivuus

Hieman yllättäen Opera ei osaa luoda elementtiin vierityspalkkeja arvoilla 'auto' ja 'scroll', vaikka sen CSS2-tuki on muuten hyvä.

  1. IE 5.5:      4/4  |  NN 6.2:    4/4
  2. Opera 6:  2/4

<< Alkuun

visible

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

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

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

Hidden aiheuttaa sen, että <div> -elementin yli menevää osaa ei näytetä.

.over { overflow: hidden }

<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>

scroll

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: ---]

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

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: ---]

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>

<< Alkuun

© Petteri Perälä 2002.
E-mail: [ petepe@mbnet.fi