Eigenschap bottom
De eigenschap bottom bepaalt de positie
van de onderrand van een element. Waarden voor de eigenschap kunnen
worden opgegeven met algemeen aanvaarde maateenheden,
bijvoorbeeld in pixels, inches, punten, procenten.
De opgegeven waarden kunnen ook negatieve getallen zijn,
in dat geval zullen elementen over elkaar heen vallen.
De coördinatenberekening wordt bepaald door de eigenschap position,
die meestal de waarde relative
(relatieve positie) of absolute
(absolute positie) aanneemt.
Syntaxis
selector {
bottom: getal met meeteenheid of auto;
}
Voorbeeld
Laten we bij het hoveren over het kindelement
de positie van de onderrand instellen
op 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;
}
:
Voorbeeld
En laten we nu bij het hoveren de onderrand
van het kindelement positioneren
op -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;
}
:
Zie ook
-
de eigenschap
top,
die de positie van de bovenrand van een element bepaalt -
de eigenschap
left,
die de positie van de linkerrand van een element bepaalt -
de eigenschap
right,
die de positie van de rechterrand van een element bepaalt -
het pseudoelement
::backdrop,
dat de positionering na het eerste element bepaalt -
de eigenschap
caption-side,
die de positie van de tabeltitel bepaalt