Asemointi

• position
• top
• bottom
• left
• right
• z-index
• Suhteellinen asemointi
• Absoluuttinen ja kiinnitetty (fixed) asemointi
• Elementtien ryhmittely syvyyssuunnassa

CSS2 ratkaisee vihdoinkin WWW-sivujen tekijöiden suurimman ongelman eli elementtien sijoittelun graafisissa selaimissa. Enää ei tarvitse temppuilla taulukoiden kanssa tai muulla tavoin väärinkäyttää HTML-elementtejä saadakseen sijoitettua esimerkiksi kuvan haluamaansa kohtaan näytöllä.

position

position: static | relative | absolute | fixed | inherit;

position-ominaisuudella voidaan määritellä millä tavalla elementin sijoittuminen näytöllä päätetään. Tarkempaan sijoitteluun käytetään top-, bottom-, left- ja right-ominaisuuksia.

Static on oletusarvo ja tarkoittaa, että elementti sijoitetaan aivan normaalisti.

Relative ottaa käyttöön suhteellisen sijoittelun. Elementin sijoittuminen lasketaan top-, bottom-, left- ja right-ominaisuuksien perusteella suhteessa siihen paikkaan, johon elementti normaalitilanteessa (static) sijoittuisi. Tätä elementtiä seuraavat elementit sijoitellaan aivan kuin suhteellisesti sijoitettu elementti olisi normaalissa paikassaan. Suhteellisesti sijoiteltu elementti ei siis vaikuta sitä seuraavien elementtien sijoitteluun.

Absolute arvo aiheuttaa elementin sijainnin ja koon määrittelyn top-, bottom-, left- ja right-, width- ja height-ominaisuuksilla suhteessa elementin sisältävään blokkiin. Absoluuttisesti sijoitettu elementti ei vaikuta sen jälkeen tulevien elementtien sijoitteluun.

Fixed toimii muuten tismalleen samoin kuin absolute, mutta elementin sijainti kiinnitetään näkyvään osaan näyttöä, eikä sitä siis vieritetä pois näytöltä. Kiinnitetyllä (fixed) sijoittelulla voidaan helposti korvata kehysten käyttäminen ilman kehysten ongelmia.

Inherit aiheuttaa sijoittelutavan perimisen vanhempi-elementiltä.

top

top: <pituus> | <prosentti> | auto | inherit;

top-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin yläreuna sijaitsee käytettävissä olevan alueen yläreunasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

top: 1em;

bottom

bottom: <pituus> | <prosentti> | auto | inherit;

bottom-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin alareuna sijaitsee käytettävissä olevan alueen alareunasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

bottom: 5%;

left

left: <pituus> | <prosentti> | auto | inherit;

left-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin vasen laita sijaitsee käytettävissä olevan alueen vasemmasta laidasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

left: 2%;

right

right: <pituus> | <prosentti> | auto | inherit;

right-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin oikea laita sijaitsee käytettävissä olevan alueen oikeasta laidasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

right: 2em;

z-index

z-index: auto | <kokonaisluku> | inherit;

CSS2:ssa voidaan elementtien sijoittuminen määritellä kolmessa ulottuvuudessa. Sen lisäksi, että kappale voidaaan sijoittaa x- ja y-akselien mukaan, niin myös z-suunta on mahdollista. Elementtejä voi siis sijoitella päällekkäin niin, että jokin näyttää olevan lähimpänä käyttäjää ja peittää tällöin alleen jääviä elementtejä. z-index-ominaisuudella voidaan määrittää elementin sijoittuminen z-suunnassa. Mitä korkeampi elementin z-index-ominaisuuden arvo on, sitä lähempänä käyttäjää se sijaitsee ja jättää taakseen kaikki ne elementit, joiden z-index-arvo on pienempi.

z-index: 3;

Suhteellinen asemointi

Määritellään span-elementille muutama aliluokka, joilla merkittyä tekstiä voidaan liikutella normaalista ylös, alas, oikealle tai vasemmalle.

body {
  background: white none;
  margin: 0em;
  padding: 0em;
}

span.up {
  position: relative;
  top: -1em;
  font-weight: bolder;
  background: yellow none;
}

span.down {
  position: relative;
  top: 1em;
  font-weight: bolder;
  background: yellow none;
}

span.left {
  position: relative;
  left: -1em;
  font-weight: bolder;
  background: yellow none;
}

span.right {
  position: relative;
  left: 1em;
  font-weight: bolder;
  background: yellow none;
}

Esimerkki XHTML-dokumentista, jossa joitakin tekstejä on asemoitu uudelleen yllämainituilla tyylimäärityksillä.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<link rel="StyleSheet" href="relative.css"
type="text/css" media="screen" />
<title>Suhteellinen sijoittelu</title>
</head>
<body>
<h1>Suhteellinen sijoittelu</h1>
<blockquote
cite="http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning">
<p>
Once a box has been laid out according to the <span class="up">normal
flow</span>, it may be shifted <span class="down">relative</span> to this
position. This is called relative positioning. Offsetting a box <span
class="left">(B1)</span> in this way has no effect on the box <span
class="right">(B2)</span> that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is applied.
<span class="right down">This implies that relative positioning may cause
boxes to overlap.</span>
</p>
<p>
<span class="left">
Relatively positioned boxes keep their normal flow size, including line
breaks and the space originally reserved for them. A relatively positioned
box establishes a new a new containing block for normal flow children and
positioned descendants.
</span>
</p>
</blockquote>
</body>
</html>

Kuva 16: Suhteellinen asemointi.

Absoluuttinen ja kiinnitetty (fixed) asemointi

Kokeillaan miten sijoittelu eri kohtiin näyttöä onnistuu. Sijoitetaan laatikko näytön jokaiseen kulmaan sekä keskelle.

body {
  background: white none;
  color: black;
  margin: 0em;
  padding: 0em;
}

.topleft {
  background: yellow none;
  color: black;
  width: 25%;
  height: 25%;
  margin: 0%;
  position: fixed;
  top: 0%;
  left: 0%;
}

.topright {
  background: blue none;
  color: black;
  width: 25%;
  height: 25%;
  margin: 0%;
  position: fixed;
  right: 0%;
  top: 0%;
}

.bottomleft {
  background: silver none;
  color: black;
  width: 25%;
  height: 25%;
  margin: 0%;
  bottom: 0%;
  left: 0%;
  position: fixed;
}

.bottomright {
  background: green none;
  color: black;
  width: 25%;
  height: 25%;
  margin: 0%;
  bottom: 0%;
  right: 0%;
  position: fixed;
}

.center {
  background: red none;
  color: black;
  width: 25%;
  height: 25%;
  margin: 0%;
  top: 37.5%;
  left: 37.5%;
  position: fixed;
}

Testaamiseen voidaan käyttää seuraavaa XHTML-dokumenttia.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<link rel="StyleSheet" href="fixed.css" type="text/css" media="screen" />
<title>Asemointia</title>
</head>
<body>
<div class="topleft">
Vasen ylänurkka (fixed)
</div>
<div class="topright">
Oikea ylänurkka (fixed)
</div>
<div class="bottomleft">
Vasen alanurkka (fixed)
</div>
<div class="bottomright">
Oikea alanurkka (fixed)
</div>
<div class="center">
Keskellä näyttöä (fixed)
</div>
</body>
</html>

Kuva 17: Kiinnitetty asemointi.

Seuraavassa luodaan tyylimääritykset, joilla saadaan aikaiseksi tyypillisiä kehyksiä matkiva sivun ulkomuotoilu. Määritellään kolme tyyliluokkaa. .navbar sijoittaa kiinnitettynä aivan näytön ylälaitaan sopivan alueen navigointilinkkejä varten. .leftbar sijoittaa kiinnitettynä sivun vasempaan laitaan alueen linkkejä varten. .logo sijoittaa kiinnitettynä aivan näytön vasempaan ylänurkkaan paikan esimerkiksi pientä logoa varten. Jokainen alue pysyy paikallaan kehysten tapaan, vaikka näytöllä olevaa tekstiä vieritettäisiin. Jokaisen alueen koko ja sijoittelu täytyy laskea tarkkaan marginaalit ja täytteet huomioiden, jotta alueet eivät menisi toistensa päälle. Koska elementtien koko ei nyt kasva niiden sisältämän tekstin tai muiden elementtien vaatiman tilan mukaan, täytyy olla erityisen varovainen, ettei sijoita liikaa tavaraa näiden sisälle. Hyvin pienellä näytöllä osa sisällöstä saattaa jäädä pois näkyvistä. Kaikki position: fixed; määrittelyt voi muuttaa muotoon position: absolute;, jolloin alueet vierittyvät normaalisti.

body {
  background: white none;
  color: black;
  /* jätetään ylämarginaalia navigointipalkin tilan verran */
  margin-top: 3em;
  /* jätetään vasempaan laitaan marginaalia saman verran kuin
  laitaan tuleva linkkialue vie */
  margin-left: 15%;
  padding: 0.5em;
}

.navbar {
  border: 1px solid;
  background: yellow none;
  color: black;
  text-align: center;
  font-weight: bold;
  /* Viedään näytöltä tilaa pystysuunnassa yhteensä 3em (2em + 0.5em + 0.5em) */
  width: 85%; height: 2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0em;
  padding-right: 0em;
  margin: 0em;
  position: fixed;
  top: 0%;
  right: 0%;
}

.leftbar {
  border: 1px solid;
  background: silver none;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 15%;
  height: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0em;
  padding-right: 0em;
  margin: 0em;
  position: fixed;
  top: 3em;
  left: 0%;
}

.logo {
  border: 1px solid;
  background: red none;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 15%;
  height: 3em;
  padding: 0em;
  margin: 0em;
  position: fixed;
  top: 0%;
  left: 0%;
}

Kuva 18: Kiinnitetyllä asemoinnilla voidaan korvata kehykset.

Tehdään seuraavaksi hieman monimutkaisempi esimerkki. Kaksi vierekkäistä laatikkoa, joista vasemmanpuoleisen sisään sijoitetaan muutama sarake tekstiä aikaisemmin opitun float-ominaisuuden avulla. Asemoitu laatikko toimii aivan normaalina sijoituspaikkana mille tahansa muille elementeille tai sijoitteluille. Oikeanpuoleisen laatikon sisään sijoitetaan edelleen kaksi pienempää laatikkoa. Kannattaa huomata, että samalla tyylillä, jolla nämä pienet laatikot sijoitetaan isomman kulmiin, voitaisiin sijoitella elementtejä edelleen näiden sisällä kulmiin tai vaikka koko näkyvän sivun kulmiin. Sijoittelu riippuu täysin siitä minkä sisällä asemoitava elementti sijaitsee. Vasen laatikko asemoidaan absoluuttisesti, eli se vierii normaalisti. Oikea laatikko asemoidaan kiinteästi, joten se ei vieri vaan pysyy paikallaan.

body {
  background: white none;
  color: black;
  margin: 0;
  padding: 0;
}

.topleft {
  border: 1px solid;
  background: yellow none;
  color: black;
  width: 40%;
  height: 85%;
  padding: 1%;
  margin: 0%;
  position: absolute;
  top: 3%;
  left: 3%;
  text-align: center;
}

.topright {
  border: 1px solid;
  background: silver none;
  color: black;
  width: 40%;
  height: 85%;
  padding: 1%;
  margin: 0%;
  position: fixed;
  right: 3%;
  top: 3%;
  text-align: center;
}

.bottomleft {
  border: 1px solid;
  background: green none;
  color: black;
  width: 25%;
  height: 25%;
  padding: 1%;
  margin: 0%;
  bottom: 0%;
  left: 0%;
  position: absolute;
  text-align: center;
}

.bottomright {
  border: 1px solid;
  background: blue none;
  color: black;
  width: 25%;
  height: 25%;
  padding: 1%;
  margin: 0%;
  bottom: 0%;
  right: 0%;
  position: absolute;
  text-align: center;
}

.sarakkeet {
  margin-top: 1em;
  margin-bottom: 1em;
  border: none;
  width: 100%;
}

.oikea {
  text-align: justify;
  margin: 0;
  padding-left: 1%;
  padding-right: 1%;
  border-right: 1px solid;
  border-left: 1px solid;
  width: 30%;
  height: 90%;
  float: left;
}

.keski {
  text-align: justify;
  margin: 0;
  padding-left: 1%;
  padding-right: 1%;
  width: 30%;
  height: 90%;
  float: left;
}

.vasen {
  text-align: justify;
  margin: 0;
  padding-left: 1%;
  padding-right: 1%;
  border-right: 1px solid;
  border-left: 1px solid;
  width: 30%;
  height: 90%;
  float: left;
}

Testaukseen tarvittava XHTML-dokumentti.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<link rel="StyleSheet" href="mixed.css" type="text/css" media="screen" />
<title>Absoluuttista ja kiinnitettyä asemointia</title>
</head>
<body>
<div class="topleft">
Vasen laatikko (absolute)
<div class="sarakkeet">
<div class="vasen">
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
</div>
<div class="keski">
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
</div>
<div class="oikea">
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
</div>
</div>
</div>
<div class="topright">
Oikea laatikko (fixed)
<div class="bottomleft">
Vasen alanurkka
</div>
<div class="bottomright">
Oikea alanurkka
</div>
</div>
</body>
</html>

Kuva 19: Erilaisia asemointitapoja yhdistettyinä.

Elementtien ryhmittely syvyyssuunnassa

Määritellään kolme uutta aliluokkaa, joilla voidaan sijoittaa elementtejä eri tasoille syvyyssuunnassa.

body {
  background: white none;
  color: black;
}

.l1 {
  position: absolute;
  z-index: 1;
  top: 5%;
  left: 5%;
  height: 2.5em;
  background: transparent none;
  color: yellow;
  font-size: 800%;
  font-weight: bolder;
  font-family: Impact, Verdana, sans-serif;
}

.l3 {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 15%;
  height: 2.5em;
  background: transparent none;
  color: silver;
  font-size: 800%;
  font-weight: bolder;
  font-family: Impact, Verdana, sans-serif;
}

.l5 {
  position: absolute;
  z-index: 5;
  top: 19%;
  left: 25%;
  height: 2.5em;
  background: transparent none;
  color: blue;
  font-size: 800%;
  font-weight: bolder;
  font-family: Impact, Verdana, sans-serif;
}

Kokeillaan seuraavalla XHTML-dokumentilla kuinka tekstit sijoittuvat siististi päällekkäin syvyyssuunnassa.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<link rel="StyleSheet" href="z.css" type="text/css" media="screen" />
<title>Z-index</title>
</head>
<body>
<div class="l1">z-index: 1 </div>
<div class="l3">z-index: 3 </div>
<div class="l5">z-index: 5 </div>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>
</body>
</html>

Kuva 20: Elementtien asemointi syvyys- eli z-suunnassa.