Päivitetty: 22.06.2002 .

top, right, bottom, left

top, right, bottom, left

Asemointi

Display

Position

Top, right, bottom left

Flot ja clear

Taso, z-index, overflow

top, right, bottom ja left

Kun elementin position arvo on muu kun 'static', eli absolute, relative tai fixed, on elementti kelluva. Tällöin elementin sijainti voidaan määritellä täysin vapaasti top-, right-, bottom- ja left -ominaisuuksilla.

Esimerkeissä kuvalle on annettu seuraava CSS-sääntö: img { position: relative }. Eli pallon paikka lasketaan siitä kohdasta jossa se normaalisti olisi.

toimivuus

Ominaisuudet 'top', 'right', 'bottom' ja 'left' kuuluivat alunperin CSS-P (CSS Position) määrittelyyn, joka sittemmin liitettiin osaksi CSS2 määritystä. CSS-P:n tuki on ollut selaimissa jo hyvän aikaan (IE 4, NN 4.5 ja Opera 3.5).

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

<< Alkuun

top

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

Oletusarvo: img { top: auto }

<img src="pallo.jpg"> Lisää tekstiä...

CSS-sääntö: img { top: 30px }

<img src="pallo.jpg">Lisää tekstiä...

Myös negatiiviset arvot ovat mahdollisia.

<< Alkuun

right

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

Oletusarvo: img { right: auto }

<img src="pallo.jpg">Pallo Lisää tekstiä...

CSS-sääntö: img { right: 100px }

<img src="pallo.jpg">PalloLisää tekstiä...

Jos tulos on mielestäsi omituinen, ajattele näin: Määritys 'right: 100px' lisää pallon oikealle puolella 100px tyhjää tilaa, joten pallo siirtyy vasemmalle. Ominaisuus 'right' ja 'left' ovat toistensa vastakohtia. Vaakasuuntaiseen asemointiin käytetään yleensä 'left' -arvoa.

<< Alkuun

bottom

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

Oletusarvo: img { bottom: auto }

<img src="pallo.jpg">Pallo Lisää tekstiä...

CSS-sääntö: img { bottom: 10px }

<img src="pallo.jpg">PalloLisää tekstiä...

Ominaisuus 'bottom' ja 'top' ovat toistensa vastakohtia. Pystysuuntaiseen asemointiin käytetään yleensä 'top' -arvoa

<< Alkuun

left

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

Oletusarvo: img { left: auto }

<img src="pallo.jpg">Pallo Lisää tekstiä...

CSS-sääntö: img { left: 125px }

<img src="pallo.jpg">Pallo Lisää tekstiä...

Nyt pallon vasemmalle puolen tulee 125px tyhjää, joten pallo siirtyy oikealle.

<< Alkuun

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