CSS bottom
La proprietà CSS bottom definisce la distanza dell’elemento dal bordo inferiore del contenitore (CSS2/CSS3)
La proprietà bottom
viene utilizzata per posizionare un elemento verticalmente rispetto al bordo inferiore del suo contenitore posizionato. È efficace solo se l’elemento ha una proprietà position
diversa da static
, come absolute
, fixed
o relative
.
Sintassi
Significato dei valori principali:
-
auto: Valore predefinito. Il browser calcola automaticamente la posizione verticale.
-
lunghezza: Una distanza specifica dal bordo inferiore (es.
10px
,5em
,20%
). -
valori negativi: Sposta l’elemento in basso (es.
bottom: -20px;
). -
inherit: Eredita il valore dal suo elemento genitore.
-
initial: Imposta il valore alla sua impostazione iniziale (di default
auto
). -
unset: Rimuove qualsiasi valore assegnato, ereditandolo se possibile o tornando al valore predefinito.
Esempio proprietà: bottom
Codice Esempio: bottom

.container-bottom-example {
position: relative;
width: 300px;
height: 200px;
background-color: #e5e5f7;
border: 2px solid #333;
}
.bottom-box {
position: absolute;
bottom: 30px;
left: 20px;
width: 100px;
height: 50px;
background-color: #50a14f;
color: white;
text-align: center;
line-height: 50px;
border-radius: 8px;
font-weight: bold;
}
Contenuto Esempio: bottom
Esempio di utilizzo di bottom
In questo esempio, un elemento viene posizionato 30px dal fondo del contenitore tramite la proprietà bottom
e position: absolute
:
CSS e HTML per posizionare un elemento dal fondo:
<style>
.container-bottom-example {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
border: 2px solid #ccc;
}
.bottom-box {
position: absolute;
bottom: 30px;
left: 20px;
width: 150px;
height: 50px;
background-color: #50a14f;
color: white;
text-align: center;
border-radius: 5px;
padding: 10px;
font-size: 18px;
}
</style>
<div class="container-bottom-example">
<div class="bottom-box">Posizionato con bottom: 30px;</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.