Características top en CSS

Una propiedad top en CSS que determina la posición vertical de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.

Funciones top css

Valor inicial	`auto`
Aplicado a	Elementos posicionados.
Heredable	No
Móvil	Sí
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a absolutas.

/* <longitud> valores */ 
top:  3px; 
top:  2.4em;
/* <porcentajes> valores relativos */ 
/* tomados en relación con la altura del bloque contenedor del elemento */ 
top:  10%;
/* es una palabra reservada */ 
top:  auto;
/* valores globales */ 
top: inherit;
top: initial;
top: unset;

El efecto de la propiedad top depende del valor de la propiedad position:

Cuando la propiedad se establece position en absolute o fixed, la propiedad top establece la distancia entre el borde superior del elemento y el borde superior de su bloque contenedor.
Cuando la propiedad se establece position en relative, la propiedad top determina cuánto se moverá el borde superior del elemento sobre su posición normal.
Pero cuando la propiedad se establece position en sticky, la propiedad top actuará como si la posición del elemento relative fuera cuando está en la ventana gráfica, y fixed actuará como si no estuviera en la ventana gráfica.
Cuando la propiedad se establece positionen static(es decir, el elemento no puede cambiar su ubicación), la propiedad top no tendrá ningún efecto.

Cuando se especifican valores para las propiedades top y bottom, el valor de la propiedad height no está definido o era auto o 100%, los valores asignados a top y bottom. Si se utiliza el valor de la propiedad, la propiedad tiene height prioridad y se top ignorará bottom.

Ejemplos y aplicaciones en código

Este ejemplo muestra el uso de la palabra reservada auto con un elemento <div> de posición absoluta:

< div  class = "parent" > 
    < span > elemento principal del contenedor </ span > 
    < div  class = "actual" > posición real </ div > 
</ div >

Código CSS:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: absolute;
  top: auto;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Ejemplo de uso de un valor longitudinal <length> con la posición del elemento relative establecida en relativa a través de la propiedad position. Observe cómo el elemento se moverá hacia abajo en relación con su posición original:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: relative;
  top: 20px;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Y este ejemplo trata sobre el uso de la propiedad top con un elemento cuya posición es absoluta:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
  position: relative;
}
.actual {
  position: absolute;
  top: 0;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	5	6	1.0

Características generales

<length>

Un valor longitudinal <length> negativo o positivo que representa:

La distancia entre el borde superior del elemento y el borde superior de su bloque contenedor. Si la posición del elemento es absolutamente (absolutamente posicionado)
La distancia que el borde superior del elemento se moverá por encima de su posición normal. Esto es si el elemento está relativamente posicionado.

<percentage>

Un porcentaje de la altura del bloque que contiene el elemento.

auto

Si la posición del elemento es absoluta, este valor hará que la posición del elemento se determine en función de la propiedad bottom.
Si la posición del elemento es relativa, este valor establecerá la posición del elemento según la propiedad bottom desde la posición inicial del elemento, y si la propiedad también bottom es igual auto, el elemento no se moverá verticalmente.

Estructura top css

top: <length> | <percentage> | auto;

Consulte también

La página de propiedades position que describe cómo se coloca el objeto en el documento.
La página de cada una de las propiedades bottom, right y left responsable de ubicar el elemento.