Características top en CSS

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 inicialauto
Aplicado aElementos posicionados.
HeredableNo
Móvil
Valor calculadoComo 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 absolutefixed, 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 topbottom, el valor de la propiedad height no está definido o era auto100%, los valores asignados a topbottom. 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.0561.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.