Característica del CSS Bottom

Tabla de contenidos

Funciones y aplicaciones del CSS bottom
Ejemplos del uso CSS bottom
Soporte del CSS bottom en los navegadores
Funcionamiento general del CSS bottom

Una propiedad bottom 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 y aplicaciones del CSS bottom

Valor inicial	`auto`
Aplicado a	Elementos posicionados
heredable	No
Animable	sí
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a absolutas

/* <longitud> valores */ 
bottom :  3px ; 
bottom :  2.4em ; 
/* <porcentajes> valores relativos */ 
/* tomados en relación con la altura del contenedor del elemento */ 
bottom :  10 %; 

/* palabra reservada */ 
bottom :  auto ; 

/* valores globales */ 
bottom :  inherit; 
bottom :  initial; 
bottom :  unset;

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

Cuando la propiedad se establece position en absolute o fixed, la propiedad establece la bottom distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.
Cuando la propiedad se establece position en relative, la propiedad determina cuánto bottom se moverá el borde inferior del elemento sobre su posición normal.
Cuando la propiedad se establece position en sticky, la propiedad bottom 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 position en static, es decir el elemento no puede cambiar su ubicación, con esta propiedad no tendrá el bottom ningún efecto.

Cuando se especifican valores para las propiedades top y bottom, y 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 del uso CSS bottom

Este ejemplo muestra el uso de la palabra reservada autocon un elemento de <div> 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:  1 em ; 
  height :  150 px ; 
} 

.actual  { 
  position:  absolute; 
  bottom:  auto; 

  background-color:  #310736; 
  color:  red; 
  box-sizing:  border-box; 
  width:  250 px; 
  height:  2 cm;
  padding:  0.25 em; 
  text-align:  center; 
  opacity:  0.9; 
}

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

.parent  { 
  background-color:  #f8f9fa; 
  padding:  1 em; 
  height:  150 px; 
} 
.actual  { 
  position:  absolute; 
  bottom:  20 px; 

  background-color:  #310736; 
  color:  red; 
  box-sizing:  border-box; 
  width:  250 px; 
  height:  2 cm;
  padding:  0,25 em; 
  text-align:  center; 
  opacity:  0,9 ; 
}

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

.parent{ 
  background-color:  #f8f9fa; 
  padding:  1 em; 
  height:  150 px; 
  position:  relative; 
} 
.actual { 
  position:  absolute; 
  bottom:  0; 

  background-color:  #310736; 
  color:  red; 
  box-sizing:  border-box; 
  width:  250 px; 
  height:  2 em; 
  padding:  0.25em; 
  text-align:  center; 
  opacity:  0,9; 
}

Soporte del CSS bottom en los navegadores

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

Funcionamiento general del CSS bottom

`<length>`

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

La distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. Si la posición del elemento es absolutamente posicionado.
La distancia que el borde inferior 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 top.
Si la posición del elemento es relativa, este valor establecerá la posición del elemento según la propiedad top desde la posición inicial del elemento, y si la propiedad también top es igual auto, el elemento no se moverá verticalmente.

Estructura de uso del CSS bottom

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