CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

bottom: valore;

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

CODE: CSSpreleva codice
  1. .container-bottom-example {
  2.   position: relative;
  3.   width: 300px;
  4.   height: 200px;
  5.   background-color: #e5e5f7;
  6.   border: 2px solid #333;
  7. }
  8.  
  9. .bottom-box {
  10.   position: absolute;
  11.   bottom: 30px;
  12.   left: 20px;
  13.   width: 100px;
  14.   height: 50px;
  15.   background-color: #50a14f;
  16.   color: white;
  17.   text-align: center;
  18.   line-height: 50px;
  19.   border-radius: 8px;
  20.   font-weight: bold;
  21. }

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:


Posizionato con bottom: 30px;

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.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies