Proprietà CSS bottom
La proprietà CSS bottom specifica la posizione inferiore di un elemento in combinazione con la proprietà position. Esempi e prova dal vivo.
La proprietà CSS bottom imposta la posizione verticale di un elemento posizionato rispetto al suo blocco contenitore. Funziona solo quando l'elemento ha un valore position diverso da static; un valore positivo spinge il bordo inferiore dell'elemento verso l'alto, allontanandolo dal bordo inferiore del suo box di riferimento.
Nota: La proprietà bottom non ha effetto sugli elementi con position: static (il valore predefinito), quindi non accade nulla finché non si imposta anche position.
Come position cambia l'effetto
Il box di riferimento da cui bottom misura dipende interamente dal valore position dell'elemento:
relative—bottomsposta l'elemento dalla sua posizione normale.bottom: 20pxlo muove di 20px verso l'alto rispetto a dove si troverebbe altrimenti, senza influenzare il layout degli elementi circostanti.absolute— l'elemento è posizionato rispetto all'antenato posizionato più vicino (un antenato il cuipositionnon èstatic).bottom: 0lo fissa al bordo inferiore di quell'antenato.fixed— l'elemento è posizionato rispetto al viewport e rimane fisso mentre la pagina scorre.sticky— l'elemento si comporta comerelativefinché il suo contenitore di scorrimento non raggiunge una soglia, dopodiché si comporta comefixed.
bottom vs. top
Se sia top che bottom sono impostati sullo stesso elemento, top ha la precedenza quando l'elemento ha un'altezza fissa (per position: absolute/fixed), perché top viene risolto per primo. Se l'altezza è auto, impostare entrambi top e bottom estende l'elemento per riempire lo spazio tra i due offset — un modo pratico per rendere un box posizionato in modo assoluto alto quanto il suo contenitore senza specificare un'altezza.
Valori percentuali
Un valore percentuale di bottom viene calcolato dall'altezza del blocco contenitore, non dall'elemento stesso. Se il blocco contenitore non ha un'altezza esplicita, gli offset percentuali possono risolversi a 0 o essere ignorati; è quindi preferibile usare unità di lunghezza (px, em, rem) quando l'altezza del genitore è sconosciuta.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. La posizione bottom può essere animata. |
| Versione | CSS2 |
| Sintassi DOM | object.style.bottom = "10px"; |
Sintassi
Sintassi della proprietà CSS bottom
bottom: auto | length | percentage | initial | inherit;Esempio della proprietà bottom:
Esempio della proprietà CSS bottom con il valore position absolute
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Risultato
Esempio della proprietà bottom con tutte le posizioni:
Esempio della proprietà CSS bottom con tutte le posizioni
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</div>
</div>
<br />
<div class="fixed"><strong>position: fixed and bottom 50px</strong>
<br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
<div class="parent">
This div element has position: relative.
<div class="sticky"><strong>position: sticky and bottom 10px</strong>
<br />This div is sticky.</div>
</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | Questo è il valore predefinito. Lascia che il browser calcoli la posizione del bordo inferiore. | Play it » |
| percentage | Definisce la posizione dell'elemento in percentuale dell'altezza del blocco contenitore. | |
| length | Definisce la posizione dell'elemento in px, cm, ecc. Sono ammessi valori negativi. | Play it » |
| initial | Imposta la proprietà al suo valore predefinito. | Play it » |
| inherit | Eredita la proprietà dal suo elemento genitore. |
Proprietà correlate
L'offset bottom è una delle quattro proprietà di offset del box che funzionano insieme a position:
- top — imposta l'offset verticale dal bordo superiore del box di riferimento.
- left — imposta l'offset orizzontale dal bordo sinistro.
- right — imposta l'offset orizzontale dal bordo destro.
Un pattern comune è fissare un elemento a un angolo, ad esempio position: absolute; bottom: 0; right: 0; per ancorare un badge all'angolo in basso a destra del suo contenitore.