Propiedad top

La propiedad top establece la posición del borde superior del elemento respecto a la parte superior del elemento padre. Los valores para la propiedad se pueden escribir con unidades de medida comúnmente aceptadas, por ejemplo, en píxeles, pulgadas, puntos, porcentajes. Los valores establecidos también pueden ser números negativos, en este caso los elementos se superpondrán unos a otros. El cálculo de las coordenadas está determinado por la propiedad position, que normalmente toma el valor relative (posición relativa) o absolute (posición absoluta).

Sintaxis

selector {
	top: tamaño o auto;
}

Ejemplo

Al pasar el cursor sobre el elemento hijo establezcamos la posición de su borde superior igual 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;
}

Ejemplo

Y ahora que al pasar el cursor el borde superior del elemento hijo esté ubicado 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;
}

Véase también

propiedad bottom,
que establece la posición del borde inferior del elemento
propiedad left,
que establece la posición del borde izquierdo del elemento
propiedad right,
que establece la posición del borde derecho del elemento
pseudoelemento ::backdrop,
que establece la ubicación después del primer elemento
propiedad caption-side,
que establece la posición del título de la tabla