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

cssselettore {
  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:

html<div id="elem">
  <p></p>
</div>

css#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:

html<div id="elem">
  <p></p>
</div>

css#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