Asemointi position-ominaisuudella

position: sticky — tämä jää kiinni yläreunaan, kun vierität alaspäin

Tällä lohkolla on position: relative, joten se toimii ankkurina.

position: absolute

Tekstikappale, joka ei huomioi absoluuttisesti asemoitua lohkoa.

Tekstikappale 1

Tekstikappale 2, jolla on suurempi z-index

Tekstikappale 3

Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemahan, sukuvirttä suoltamahan, lajivirttä laulamahan. Sanat suussani sulavat, puhe'et putoelevat, kielelleni kerkiävät, hampahilleni hajoovat.

Veli kulta, veikkoseni, kaunis kasvinkumppalini! Lähe nyt kanssa laulamahan, saa kera sanelemahan yhtehen yhyttyämme, kahta'alta käytyämme! Harvoin yhtehen yhymme, saamme toinen toisihimme näillä raukoilla rajoilla, poloisilla Pohjan mailla.

Lyökämme käsi kätehen, sormet sormien lomahan, lauloaksemme hyviä, parahia pannaksemme, kuulla noien kultaisien, tietä mielitehtoisien, nuorisossa nousevassa, kansassa kasuavassa.

CSS

/* --- sticky --- */
/* Vähintään yksi raja on annettava, muuten mitään ei tapahdu. */
.tarttuva {
  position: sticky;
  top: 0;
  background-color: #ffe9a8;
  border: 1px solid #b3261e;
  padding: 0.5em;
}

/* --- absolute ja sen ankkuri --- */
/* position: relative ilman koordinaatteja ei siirrä mitään, mutta
   tekee lohkosta ankkurin absoluuttisesti asemoiduille jälkeläisille. */
.ankkuri {
  position: relative;
  height: 8em;
  border: 2px solid #1f5c46;
  margin: 1em 0;
}

.absoluuttinen {
  position: absolute;   /* suhteessa lähimpään asemoituun esi-isään */
  bottom: 0.5em;
  right: 0.5em;
  width: 40%;
  background-color: #e6f2eb;
  border: 1px solid #1f5c46;
  padding: 0.5em;
}

/* --- relative ja z-index --- */
/* Suhteellisesti asemoitu elementti vie edelleen alkuperäisen tilansa. */
.t1, .t2, .t3 {
  position: relative;
  font-size: 1.5em;
  color: #b3261e;
  background-color: #ffffff;
  border: 1px solid #b3261e;
}

.t2 {
  top: -2em;
  left: 2em;
  z-index: 10;   /* nostaa muiden päälle */
}

.t3 {
  top: -4em;
  left: 4em;
}

/* position: fixed on jätetty tästä esimerkistä pois tarkoituksella.
   Kehyksen sisällä se kiinnittyisi kehyksen reunaan ja peittäisi
   koodikentät. Kokeile sitä omalla sivullasi. */

HTML

<div class="tarttuva">position: sticky — tämä jää kiinni yläreunaan, kun
vierität alaspäin</div>

<div class="ankkuri">
  <p>Tällä lohkolla on position: relative, joten se toimii ankkurina.</p>
  <div class="absoluuttinen">position: absolute</div>
</div>

<p>Tekstikappale, joka ei huomioi absoluuttisesti asemoitua lohkoa.</p>

<p class="t1">Tekstikappale 1</p>
<p class="t2">Tekstikappale 2, jolla on suurempi z-index</p>
<p class="t3">Tekstikappale 3</p>

<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemahan, sukuvirttä suoltamahan, lajivirttä laulamahan. Sanat suussani sulavat, puhe'et putoelevat, kielelleni kerkiävät, hampahilleni hajoovat.</p>

<p>Veli kulta, veikkoseni, kaunis kasvinkumppalini! Lähe nyt kanssa laulamahan, saa kera sanelemahan yhtehen yhyttyämme, kahta'alta käytyämme! Harvoin yhtehen yhymme, saamme toinen toisihimme näillä raukoilla rajoilla, poloisilla Pohjan mailla.</p>

<p>Lyökämme käsi kätehen, sormet sormien lomahan, lauloaksemme hyviä, parahia pannaksemme, kuulla noien kultaisien, tietä mielitehtoisien, nuorisossa nousevassa, kansassa kasuavassa.</p>

CSS

HTML

Javascript

Konsoli