Elementin sijainti

Osassa esitellään position-ohjeen asetuksia joilla vaikutetaan HTML-elementin sijaintiin sekä käyttäytymiseen www-sivulla.

Ohjeen position asetukset;

Kiinteä sijainti, static

Kun html-elementin CSS-astuksena on position: static; ei elementillä ole mitään erikoisia asetuksia ja elementti siirtyy normaalisti www-sivun sisällön mukana, esimerkki alla.

Kokeile esimerkkiä pienentämällä selaimen kulmasta selaimen koko näytölläsi. Alla esimerkin koodaus:

  CSS-ohjeet:
  
  div.staattinen {
    position: static;
    border: 1px solid red;
    padding: 8px;
    color: white;
    background-color: black;
	width:90%;
  }
  
  HTML-koodaus:
  <div class="staattinen">
    Tällä div-elementillä on asetuksena: position: static;
  </div>
  

Suhteellinen sijainti, relative

Kun html-elementin CSS-asetuksena on position: relative; HTML-elementin sijainti pysyy suhteessa muihin elementteihin samana, mutta esimerkiksi asetettu leveys ei reagoi selaimen näkymän muutokseen, esimerkki alla.

Kokeile esimerkkiä pienentämällä selaimen kulmasta selaimen koko näytölläsi. Alla esimerkin koodaus:

  CSS-ohjeet:
  
  div.suhteellinen {
    position: relative;
    left: 30px;
    border: 1px solid #73AD21;
    padding: 8px;
	background-color:  RGBA(64,224,208,0.4);
  }
  
  HTML-koodaus:
  <div class="suhteellinen">
    Tällä div-elementillä on asetuksena: position: relative;
  </div>
  

Yllä olevan saa reagoimaan selaimen koon muutokseen asettamalla CSS-lisäohjeeksi leveyden, esim width: 80%;.

Määrätty sijainti, fixed

Kun html-elementin CSS-asetuksena on position: fixed; HTML- elementti sijaitsee näkyvillä asetetussa paikassa vaikka selaimen näkymän koko muuttuu, esimerkki alla.

Esimerkin sininen laatikko näkyy www-sivun oikeassa alakulmassa. Alla esimerkin koodaus:

  CSS-ohjeet:
  
  div.vakio {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 1px solid RGB(19,41,72);
    padding: 8px;
    background-color: RGB(192,213,239);
  }
  
  HTML-koodaus:
  <div class="vakio">
    Tällä div-elementillä on asetuksena: position: fixed;
  </div>
  

Esimerkissä käytettyä asetusta voi käyttää lukitsemaan esimerkiksi menu-valikon näkymään www-sivulla koko ajan tai asetuksella voi toteuttaa www-sivulle siirtymispainikkeen sivun yläosaan.

Absoluuttinen sijainti, absolute

Kun html-elementin CSS-asetuksena on position: absolute; HTML-elementti lukitaan paikoilleen, esimerkki alla.

Alla esimerkin koodaus:

  CSS-ohjeet:
  
  div.isolaatikko {
    position: relative;
    width: 400px;
    height: 200px;
    border: 1px solid #73AD21;
    padding: 5px;
  } 
  div.absoluutti {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid BLUE;
    background-color: RGB(255,210,255);
    padding:5px;
  }
  
  HTML-koodaus:
  <div class="isolaatikko"> 
    Tällä div-elementillä on asetuksena: position: relative;
      <div class="absoluutti">
	    Tällä div-elementillä on asetuksena: position: absolute;
	  </div>
  </div>
  

Esimerkissä käytettyä asetusta voi käyttää lukitsemaan esimerkiksi menu-valikon näkymään www-sivulla koko ajan tai asetuksella voi toteuttaa www-sivulle siirtymispainikkeen sivun yläosaan.

Lukittu sijainti, sticky

Kun HTML-elementin CSS-asetuksena on position: sticky; tällöin HTML-elementti lukitaan paikoilleen ja lukitun elementin alapuolella oleva www-sivun sisältö liikkuu lukitun "elementin ali". Asetus on osittain käyttökelpoinen esimerkiksi menun lukitsemiseen www-sivulle jatkuvasti näkyville. Asetuksen ongelmallisuus tulee lähinnä puhelinten puolella, joille joutuu tekemään oman menunsa.

Esimerkki alla, huomaa koodi-laatikko on CSS-asetuksiltaan sellainen että se rullautuu sticky-laatikon yli:

Alla esimerkin koodaus:

  CSS-ohjeet:
  
  div.lukittu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 1px solid #4CAF50;
}
  
  HTML-koodaus:
  <div  class="lukittu">Elementti jolla sticky-asetus<div/div> 
  

Päällekkäisyys, z-index

HTML-elementtejä voidaa sijoittaa pällekkäin CSS-asetuksella z-index: -1;. Esimerkiksi img-kuvaelementti voidaan sijoittaa tekstin taakse. Esimerkiksi asetus -1 sijoittaa kuvan tekstin taakse ja 1 asetus tekstin päälle. Numero-arvojen avulla voidaan sijoittaa HTML-elementtejä useita päällekkäin.

Esimerkki alla, kuva sijoitetaan div-laatikossa tekstin alle:

Hai-kala animaatio

Myös gif-animaation päälle voi teksiä laittaa.

  CSS-ohjeet:
  
  div.isolaatikko {
    position: relative;
    width: 400px;
    height: 200px;
    border: 1px solid #73AD21;
    padding: 5px;
  }
  img.animaatio {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }
  
  HTML-koodaus:
  <div class="isolaatikko">
    <h1>Hai-kala animaatio</h1>
    <img class="animaatio" src="haikala.gif" width="100" height="140">
    <p>Myös gif-animaation päälle voi teksiä laittaa.</p>
  </div>