Proprietà top CSS
- pagina precedente text-underline-position
- Pagina successiva transform
Definizione e uso
L'attributo top definisce il margine superiore dell'elemento. Questa proprietà definisce il margine esterno superiore di un elemento posizionato rispetto al margine superiore del blocco contenente.
Nota:Se il valore dell'attributo position è "static", l'impostazione dell'attributo top non ha alcun effetto.
Spiegazione
Per gli elementi statici, è auto; per i valori di lunghezza, è la lunghezza assoluta corrispondente; per i valori percentuali, è il valore specificato; altrimenti è auto.
Per gli elementi definiti relativamente, se top e bottom sono entrambi auto, i loro valori calcolati sono entrambi 0; se uno di essi è auto, viene presa l'opposta del valore dell'altro; se entrambi non sono auto, bottom assume il valore opposto di top.
Vedi anche:
Lezione CSS:Posizionamento CSS
Manuale HTML DOM:Attributo top
Esempio
Posizionare l'alto margine dell'immagine 5 pixel sotto l'alto margine dell'elemento contenente:
img
{
position:absolute;
top:5px;
}
Sintassi CSS
top: auto|length|initial|inherit;
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| auto | Valore predefinito. La posizione dell'alto margine è calcolata dal browser. |
| % | Impostare la posizione superiore dell'elemento in percentuale rispetto all'altezza dell'elemento contenente. È possibile utilizzare valori negativi. |
| length | Impostare la posizione superiore dell'elemento utilizzando unità come px, cm, ecc. È possibile utilizzare valori negativi. |
| inherit | Definisce che l'attributo top dovrebbe essere ereditato dal valore dell'elemento genitore. |
Dettagli tecnici
| Valore predefinito: | auto |
|---|---|
| Ereditarietà: | no |
| Versione: | CSS2 |
| Sintassi JavaScript: | oggetto.style.top="50px" |
Più esempi
- Impostare l'alto margine dell'immagine utilizzando valori fissi
- Questo esempio dimostra come impostare l'alto margine dell'immagine utilizzando valori fissi.
- Impostare l'alto margine dell'immagine utilizzando percentuali
- Questo esempio dimostra come impostare l'alto margine dell'immagine utilizzando percentuali.
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- pagina precedente text-underline-position
- Pagina successiva transform
