Proprietà CSS top
La proprietà CSS top specifica la posizione superiore di un elemento in combinazione con la proprietà position. Esempi e prove interattive.
La proprietà CSS top imposta la posizione verticale di un elemento posizionato, misurata dal bordo superiore di un blocco di riferimento. Da sola non ha alcun effetto — agisce solo quando l'elemento ha anche un valore position diverso da quello predefinito static.
Questa pagina spiega come si comporta top per ciascun valore di position, le unità di misura utilizzabili, gli errori comuni e come si combina con bottom, left e right.
Come funziona top
Il blocco di riferimento rispetto al quale viene misurato top — e il significato dell'offset — dipende dal valore di position dell'elemento:
position: absoluteofixed—topsposta l'elemento dal bordo superiore del suo blocco contenitore (perabsolute, l'antenato posizionato più vicino; perfixed, il viewport). Un valore maggiore ditopspinge l'elemento più in basso.position: relative—topsposta l'elemento verso il basso rispetto alla sua posizione normale, senza influire sul layout degli elementi circostanti. Lo spazio originariamente occupato viene preservato.position: sticky—topè la distanza dalla parte superiore del contenitore di scorrimento alla quale l'elemento si "incolla" durante lo scroll.top: 0lo fa aderire proprio alla cima.position: static—topviene ignorato completamente. Questo è il valore predefinito, quindi impostare sempre primaposition.
Se sia top che bottom sono specificati su un elemento posizionato in modo assoluto la cui altezza è auto, l'elemento viene esteso per soddisfare entrambi; altrimenti top ha la precedenza e bottom viene ignorato.
I valori negativi sono consentiti — top: -20px porta un elemento posizionato in modo assoluto o fisso al di sopra del suo bordo di riferimento, e sposta un elemento posizionato in modo relativo sopra la sua posizione normale.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi posizionati. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | CSS2 |
| Sintassi DOM | Object.style.top = "50px"; |
Sintassi
Sintassi della proprietà CSS top
top: auto | length | initial | inherit;Esempio della proprietà top:
Esempio della proprietà CSS top con valore length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 0;
}
.ex2 {
top: 50px;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Risultato
Esempio della proprietà top con valore negativo:
Esempio della proprietà CSS top con valore negativo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #666;
height: 200px;
position: relative;
}
p {
margin: 0;
color: #fff;
}
.top {
position: absolute;
top: -35px;
color: #000000;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Esempio della proprietà top definita in "pt", "%" e "em":
Esempio della proprietà top con valori "pt", "%" e "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Valori
| Valore | Descrizioni | Provalo |
|---|---|---|
| auto | Imposta la posizione del bordo superiore. È il valore predefinito di questa proprietà. | Provalo » |
| length | Imposta la posizione del bordo superiore con px, cm ecc. Sono validi valori negativi. | Provalo » |
| % | Imposta la posizione del bordo superiore con % dell'elemento contenitore. Sono validi valori negativi. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quando si utilizza un valore percentuale, viene calcolato rispetto all'altezza del blocco contenitore, non alla sua larghezza. Quindi top: 50% su un elemento posizionato in modo assoluto lo sposta verso il basso della metà dell'altezza del genitore.
Errori comuni
- Dimenticare
position.topnon ha alcun effetto su un elementostatic. Se l'offset sembra ignorato, verificare chepositionsia impostato surelative,absolute,fixedosticky. - Antenato posizionato mancante. Un elemento
absolutesi posiziona rispetto al suo antenato posizionato più vicino. Se non ne esiste nessuno, ricade sul blocco contenitore iniziale (la radice delle dimensioni del viewport). Dare al genitoreposition: relativeper contenerlo. stickyche non si incolla.position: stickyfunziona solo mentre l'elemento scorre all'interno di un antenato che effettivamente ha un overflow. Un valoretopsenza un contenitore scorrevole, o un genitore conoverflow: hidden, sembrerà non fare nulla.- Usare sia
topchebottom. Su un elemento assoluto con altezzaautolo estendono; altrimentitopha la priorità ebottomviene ignorato.
Proprietà correlate
- position — necessaria affinché
topabbia effetto. - bottom, left, right — le altre proprietà di offset, usate insieme a
topper posizionare gli elementi. - z-index — controlla l'ordine di sovrapposizione quando gli elementi posizionati si sovrappongono.