CSS propiedad top

Definición y uso

La propiedad top especifica la margen superior del elemento. Esta propiedad define el desplazamiento del borde superior externo del elemento de posicionamiento con respecto al borde superior del contenedor.

Notas:Si el valor de la propiedad position es "static", la configuración de la propiedad top no tendrá ningún efecto.

Descripción

Para elementos estáticos, es auto; para valores de longitud, es la longitud absoluta correspondiente; para valores porcentajes, es el valor especificado; de lo contrario, es auto.

Para elementos definidos relativamente, si top y bottom son auto, sus valores calculados son 0; si uno de ellos es auto, toma el valor opuesto del otro; si ambos no son auto, bottom toma el valor opuesto de top.

Véase también:

Tutoriales CSS:Posicionamiento CSS

Manual de referencia HTML DOM:Propiedad top

Ejemplo

Coloca la parte superior de la imagen 5 píxeles por debajo de la parte superior del elemento contenedor:

img
  {
  position:absolute;
  top:5px;
  }

Prueba personal

Sintaxis de CSS

top: auto|length|initial|inherit;

Valor de la propiedad

Valor Descripción
auto Valor predeterminado. La posición superior se calcula mediante el navegador.
% Configurar la posición superior del elemento en porcentajes del ancho del contenedor. Se pueden usar valores negativos.
length Configurar la posición superior del elemento utilizando unidades como px, cm, etc. Se pueden usar valores negativos.
inherit Se debe especificar que el valor de la propiedad top debe ser heredado del elemento padre.

Detalles técnicos

Valor predeterminado: auto
Herencia: no
Versión: CSS2
Sintaxis de JavaScript: object.style.top="50px"

Más ejemplos

Configurar la parte superior de la imagen utilizando valores fijos
Este ejemplo muestra cómo configurar la parte superior de la imagen utilizando valores fijos.
Configurar la parte superior de la imagen utilizando porcentajes
Este ejemplo muestra cómo configurar la parte superior de la imagen utilizando porcentajes.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que completamente admite esa propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0