Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad inferior
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada fondo Con sintaxis y ejemplos.
describir
La propiedad inferior de CSS, combinada con la propiedad de posición, define la posición inferior de un elemento.
sintaxis
La sintaxis de la propiedad CSS inferior es:
bottom: value;parámetro o parámetro
valor
Valor inferior al posicionar un elemento usando la propiedad de posición. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | Un valor fijo en píxeles, em, etc. div {posición: relativa; inferior: 8px; } div {posición: absoluta; fondo: 4em; } |
| porcentaje | valor porcentual div { posición: fijo; fondo: 10%; } |
| carro | Este es el comportamiento predeterminado div { posición: relativo; inferior: automático; } |
| heredar | Indica que el elemento heredará la parte inferior de su elemento padre div {posición: heredar;} |
notas
- Cuando el valor se proporciona como un porcentaje, es relativo a la altura del bloque contenedor.
- Si la propiedad de posición se establece en relativa, absoluta o fija, puede establecer las propiedades inferior, derecha, inferior e izquierda.
- Si la propiedad de posición se establece en estática, las propiedades inferior, derecha, inferior e izquierda no se aplican.
- Consulte también las propiedades de posición, superior, derecha e izquierda.
Compatibilidad del navegador
Las propiedades inferiores de CSS tienen soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- Estático, Relativo, Absoluto: IE 4
- Corregido: IE 7
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad inferior a continuación, explorando ejemplos de cómo usarla en CSS.
posición relativa
Veamos un ejemplo en el que establecemos la propiedad de posición en relativa y establecemos un valor para la propiedad inferior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: relative; bottom: 5px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición relativa y la propiedad inferior en 5px. Esto significa que el elemento div (identificado por la clase totn2) se moverá 5 px hacia arriba desde la parte inferior en relación con el lugar en el que se colocaría en el diseño normal.
posición absoluta
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en absoluto y establecer un valor para la propiedad inferior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: absolute; bottom: 5px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en posición absoluta y configuramos la propiedad inferior en 5px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de su contenedor principal a una posición absoluta de 5 px desde la parte inferior del contenedor.
Entonces, en este ejemplo, el segundo div está en la parte superior del primer div (identificado por la clase totn1).
Posición fija
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en fijo y establecer un valor para la propiedad inferior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: fixed; bottom: 5px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición fija y configuramos la propiedad inferior en 5px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de la ventana gráfica de la pantalla a una posición fija de 5 px desde la parte inferior de la ventana gráfica.
Se ve muy similar al resultado del ejemplo de posición absoluta. La única excepción es que cuando nos desplazamos usando el ejemplo de posición fija, el segundo div (identificado por la clase totn2) permanecerá fijo en la ventana gráfica de la pantalla y no se desplazará fuera de la pantalla.