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
valitsija {
bottom: luku mittayksiköllä tai auto;
}
Esimerkki
Asetetaan lapsielementille hover-tilassa
sen alareunan sijainniksi
25px:
<div id="elem">
<p></p>
</div>
#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:
<div id="elem">
<p></p>
</div>
#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
-
ominaisuus
top,
joka määrittää elementin yläreunan sijainnin -
ominaisuus
left,
joka määrittää elementin vasemman reunan sijainnin -
ominaisuus
right,
joka määrittää elementin oikean reunan sijainnin -
pseudoelementti
::backdrop,
joka määrittää sijainnin ensimmäisen elementin jälkeen -
ominaisuus
caption-side,
joka määrittää taulukon otsikon sijainnin