Proprietà bottom

La proprietà bottom imposta la posizione del bordo inferiore dell'elemento. I valori per la proprietà possono essere scritti con le unità di misura comunemente accettate, ad esempio, in pixel, pollici, punti, percentuali. I valori impostati possono essere anche numeri negativi, in questo caso gli elementi si sovrapporranno uno sull'altro. Il conteggio delle coordinate è determinato dalla proprietà position, che di solito assume il valore relative (posizione relativa) o absolute (posizione assoluta).

Sintassi

selettore {
	bottom: numero con unità di misura o auto;
}

Esempio

Al passaggio del mouse sull'elemento figlio impostiamo la posizione del suo bordo inferiore uguale a 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;
}

Esempio

Ora facciamo in modo che al passaggio del mouse il bordo inferiore dell'elemento figlio sia posizionato a -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;
}

Vedi anche

la proprietà top,
che imposta la posizione del bordo superiore dell'elemento
la proprietà left,
che imposta la posizione del bordo sinistro dell'elemento
la proprietà right,
che imposta la posizione del bordo destro dell'elemento
lo pseudo-elemento ::backdrop,
che imposta il posizionamento dopo il primo elemento
la proprietà caption-side,
che imposta la posizione della didascalia della tabella