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

.top-container {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
border: 2px solid #ccc;
}
.top-box {
position: absolute;
top: 30px;
left: 20px;
width: 100px;
height: 50px;
background-color: #50a14f;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
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:
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.