Asemointi

CSS asemointi


CSS:n asemointiominaisuudet mahdollistavat elementtien sijoittamisen haluttuun kohtaan.


Esimerkkejä

Position:relative
Elementin asemointi suhteessa sen normaaliin sijaintiin.

Position:absolute
Elementin asemointi absoluuttisesti mihin tahansa kohtaan sivulla.

Position:fixed
Elementin asemointi kiinteästi suhteessa selainikkunaan.

Set the shape of an element
Elementin leikkaaminen tietyn muotoiseksi.

How to control overflow in an element
Elementin ylivuoto-ominaisuuden määrittäminen.

How to show set the browser to automatically handle overflow
Elementin ylivuoto-ominaisuuden määrittäminen selaimen automaattikäsittely, kun elementti ei mahdu sille määritellylle alueelle.

Vertical alignment of an image
Kuvan korkeussuuntainen asemointi suhteessa tekstiin.

Z-index
Z-indeksin käyttäminen elementin esittämiseksi toisen elementin takana.

Set the top edge of an image using a pixel value
Elementin ylälaidan paikan määrittäminen pikseliarvoisena.

Set the top edge of an image using a percent value
Elementin ylälaidan paikan määrittäminen prosenttiarvoisena.

Set the bottom edge of an image using a pixel value
Elementin alalaidan paikan määrittäminen pikseliarvoisena.

Set the bottom edge of an image using a percent value
Elementin alalaidan paikan määrittäminen prosenttiarvoisena.

Set the left edge of an image using a pixel value
Elementin vasemman laidan paikan määrittäminen pikseliarvoisena.

Set the left edge of an image using a percent value
Elementin vasemman laidan paikan määrittäminen prosenttiarvoisena.

Set the right edge of an image using a pixel value
Elementin oikean laidan paikan määrittäminen pikseliarvoisena.

Set the right edge of an image using a percent value
Elementin oikean laidan paikan määrittäminen prosenttiarvoisena.


CSS asemointiominaisuudet

CSS:n asemointiominaisuudet mahdollistavat elementin asemoinnin vasemman, oikean, ylä- tai alalaidan mukaan. Ne mahdollistavat myös elementin muodon määrittämisen, elementin sijoittamisen toisen taakse ja esittämisen määrittämisen tilanteessa jossa elementti on liian suuri maksuakseen määritelylle alueelle.

Selaintuki: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: Numero "W3C"-sarakkeessa ilmaisee missä W3C:n CSS rekommendaatiossa omionaisuus on määritetty (CSS1 tai CSS2).

Ominaisuus Kuvaus Arvot IE F N W3C
bottom

Asettaa elementin alalaidan etäisyyden suhteessa äitielementin alalaitaan.

auto
%
length
5 1 6 2
clip Asettaa elementin muodon. Elementti esitetään asetettuun muotoon leikattuna. shape
auto
4 1 6 2
left Asettaa elementin vasemman laidan etäisyyden suhteessa äitielementin vasempaan laitaan. auto
%
length
4 1 4 2
overflow Määrittää mitä tapahtuu jos elementti on määriteltyä aluetta suurempi. visible
hidden
scroll
auto
4 1 6 2
position Määrittää elementille staattisen, suhteellisen, absoluuttisen tai kiinteän sijainnin. static
relative
absolute
fixed
4 1 4 2
right Asettaa elementin oikean laidan etäisyyden suhteessa äitielementin oikeaan laitaan. auto
%
length
5 1 6 2
top Asettaa elementin ylälaidan etäisyyden suhteessa äitielementin ylälaitaan. auto
%
length
4 1 4 2
vertical-align

Asettaa elementin korkeussuuntaisen asemoinnin.

baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Asettaa elementin pinoamisjärjestyksen. auto
number
4 1 6 2

 


AttachmentSize
CSS_asemointi_harjoituksia.odt180.84 KB
CSS_asemointi_kysymyksia.txt473 bytes