Proprietà top

La proprietà top definisce la posizione del bordo superiore dell'elemento rispetto alla parte superiore dell'elemento genitore. I valori per la proprietà possono essere scritti con le unità di misura comunemente accettate, ad esempio, in pixel, pollici, punti, percentuali. I valori impostati possono essere anche numeri negativi, in questo caso gli elementi si sovrapporranno uno sull'altro. Il conteggio delle coordinate è determinato dalla proprietà position, che di solito assume il valore relative (posizione relativa) o absolute (posizione assoluta).

Sintassi

selettore {
	top: dimensione o auto;
}

Esempio

Al passaggio del mouse sull'elemento figlio impostiamo la posizione del suo bordo superiore uguale a 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Esempio

Ora facciamo in modo che al passaggio del mouse il bordo superiore dell'elemento figlio sia posizionato a -50px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	top: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Vedi anche

la proprietà bottom,
che imposta la posizione del bordo inferiore dell'elemento
la proprietà left,
che imposta la posizione del bordo sinistro dell'elemento
la proprietà right,
che imposta la posizione del bordo destro dell'elemento
lo pseudo-elemento ::backdrop,
che definisce il posizionamento dopo il primo elemento
la proprietà caption-side,
che imposta la posizione della didascalia della tabella