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
  • auto
  • Estructura de uso 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

/*  valores */ 
bottom :  3px ; 
bottom :  2.4em ; 
/*  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  class = "parent" > 
    < span > elemento principal del contenedor  
    < div  class = "actual" > posición real  

.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; 
}

.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 ; 
}

.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; 
}

bottom:  < length>  |    |  auto ;