Top-ominaisuus

Ominaisuus top asettaa elementin yläreunan sijainnin vanhempielementin yläosasta. Ominaisuuden arvot voidaan kirjoittaa yleisesti hyväksytyillä kooko yksiköillä, esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina. Asetettavat arvot voivat olla myös negatiivisia lukuja, tässä tapauksessa elementit asettuvat päällekkäin. Koordinaattien laskenta määräytyy ominaisuuden position perusteella, joka yleensä saa arvon relative (suhteellinen sijainti) tai absolute (absoluuttinen sijainti).

Syntaksi

cssvalitsija {
  top: koko tai auto;
}

Esimerkki

Asetetaan lapsielementille, kun sitä osoitetaan, sen yläreunan sijainniksi 25px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
  margin-left: 50px;
}
p:hover {
  top: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Esimerkki

Asetetaan nyt lapsielementin yläreuna kohdalleen -50px, kun sitä osoitetaan:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  margin-top: 50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  top: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Katso myös