Päivitetty: 22.06.2002 .

position

position

Asemointi

Display

Position

Top, right, bottom left

Flot ja clear

Taso, z-index, overflow

position

Esimerkeissä käytetään kahta @-merkkiä, joka position arvoa kohden. Merkit ovat koodissa vierekkäin. Ensimmäinen @-merkki ei sisällä mitään asemointia, kun taas sen 'vieressä' olevan merkin asemointi näkyy lihavoituna ja tulos jossakin kohtaa ruutua.

Jos muutat sivun kokoa tai näytön resoluutiota 'absolute' ja 'fixed' merkit siirtyvät samassa suhteessa, koska ne on asemoitu käyttäen suhteellisia mittoja (pt ja %)

toimivuus

Tämän sivun esimerkkien perusteella CSS tuki 'Position' -ominaisuudelle on siis seuraava:

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

<< Alkuun

static

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

Oletusarvo: span { position: static }

<span>@</span>

 

CSS-sääntö: span { position: static }

<span>@</span>

Static on siis elementin oletusarvon, eli se asemoidaan aivan normaalisti. Huomaa, että static ei ota vastaan muita määritteitä.

<< Alkuun

relative

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

Oletusarvo: span { position: static }

<span>@</span>

CSS-sääntö: span { position:relative; left:150px }

<span>@</span>

Elementin paikka määritellään siitä kohdasta, jossa se olisi normaalisti (static). Tähän kohtaan jää elementin kokoinen tyhjä tila. Huomaa, että jos relativelle ei anneta top- ja/tai left -määritteitä se käyttäytyy kuten static.

<< Alkuun

absolute

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

Oletusarvo: span { position: static }

<span>@</span>

CSS-sääntö:
span { position: absolute; top:405pt; left:200pt }

<span> @</span>

Elementin paikka määritellään selaimen/elementin vasemmasta ylänurkasta (0,0). Absolute arvo saa elementin 'kellumaan' muiden päällä ja sen jälkeen tulevat elementit käyttäytyvät kuin elementtiä ei olisi lainkaan.

Huomaa että absolute arvolla elementin todellisella sijainnilla ei ole mitään vaikutusta siihen missä elementti näytetään. Paitsi jos elementti sijaitsee toisen absoluuttisesti asemoidun elementin sisällä, tällöin sijainti laskentaa kyseisen elementin vasemmasta ylänurkasta.

<< Alkuun

fixed

Toimivuus: CSS2 [IE: ---]   [NN: 6.2]   [Opera: 6.0]

Oletusarvo: span { position: static }

<span>@</span>

CSS-sääntö: span { position: fixed; top:95%; left:5% }

<span>@</span>

Fixed-ominaisuus toimii muuten kuten absolute, mutta elementin paikka 'kiinnitetään' näyttöön. Eli kun sivua vieritetään, elementti pysyy paikallaan. Ominaisuus muistuttaa 'backround-imagen: fixed' toimintaa, mutta se kohdistuu kaikille elementeille.

<< Alkuun

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