CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS top

La proprietà CSS top definisce la distanza dell’elemento dal bordo superiore del contenitore (CSS2/CSS3)

La proprietà top viene utilizzata per determinare la distanza tra il bordo superiore di un elemento e il bordo superiore del suo contenitore posizionato. È efficace solo se l'elemento ha una proprietà position impostata su relative, absolute, fixed o sticky.

Sintassi

top: lunghezza | percentuale | auto;

Significato dei valori principali:

  • lunghezza: Imposta una distanza in unità come px, em, rem, ecc. (es: top: 20px;).

  • percentuale: Calcolata rispetto all'altezza del contenitore di riferimento (es: top: 10%;).

  • auto: Usa il valore automatico predefinito (nessuno spostamento verticale).

  • valori negativi: Sposta l’elemento in alto (es. top: -20px;).

  • inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.


Esempio proprietà: top


Codice Esempio: top

CODE: CSSpreleva codice
  1. .top-container {
  2.   position: relative;
  3.   width: 300px;
  4.   height: 200px;
  5.   background-color: #f5f5f5;
  6.   border: 2px solid #ccc;
  7. }
  8.  
  9. .top-box {
  10.   position: absolute;
  11.   top: 30px;
  12.   left: 20px;
  13.   width: 100px;
  14.   height: 50px;
  15.   background-color: #50a14f;
  16.   color: white;
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20.   border-radius: 5px;
  21. }

Contenuto Esempio: top

Esempio di utilizzo di top con position: absolute

In questo esempio, un elemento viene posizionato a 30px dal bordo superiore del suo contenitore:


Posizionato con top: 30px;

CSS e HTML per top:

  
  <style>
    .top-container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #f5f5f5;
      border: 2px solid #ccc;
    }

    .top-box {
      position: absolute;
      top: 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="top-container">
    <div class="top-box">Posizionato con top: 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