Bottom-ominaisuus

Ominaisuus bottom määrittää elementin alareunan sijainnin. Ominaisuuden arvot voidaan kirjoittaa yleisesti hyväksytyillä mittayksiköillä, esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina. Asetetut arvot voivat olla myös negatiivisia lukuja, jolloin elementit asettuvat päällekkäin. Koordinaattien laskenta määräytyy ominaisuuden position perusteella, jolla yleensä on arvo relative (suhteellinen sijainti) tai absolute (absoluuttinen sijainti).

Syntaksi

cssvalitsija {
  bottom: luku mittayksiköllä tai auto;
}

Esimerkki

Asetetaan lapsielementille hover-tilassa sen alareunan 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;
}
p:hover {
  bottom: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Esimerkki

Asetetaan nyt hover-tilassa lapsielementin alareuna sijaintiin -50px:

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;
}
p:hover {
  bottom: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Katso myös