La propiedad CSS inferior permite modificar la posición vertical de un elemento. La propiedad inferior se utiliza para establecer el valor de la posición de un elemento desde la parte inferior de la ventana gráfica.
- Si el valor de posición es fijo o absoluto, el elemento ajusta su borde inferior con respecto al borde inferior de su elemento principal o el bloque que lo contiene.
- Si el valor de posición es relativo, el elemento se posiciona con respecto a su propio borde inferior actual.
- Si el valor de posición es fijo, entonces el elemento ajusta la posición que es relativa cuando el elemento está dentro de la ventana gráfica y su posición se fijará si está fuera de la ventana gráfica.
- Si el valor de la posición es estático, el elemento no tiene ningún efecto debido a la propiedad inferior.
Sintaxis:
bottom: auto| length| %| initial| inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
auto: este es el valor predeterminado de la propiedad inferior. Establece la propiedad inferior en función del navegador, es decir, el navegador decidirá la posición del borde inferior.
Sintaxis:
bottom: auto;
Ejemplo: Este ejemplo ilustra el uso de la propiedad inferior cuyo valor se establece en automático.
HTML
<html> <head> <title> Bottom Property</title> </head> <body> <h1 style="color:darkgreen;">GeeksforGeeks</h1> <p style="position: fixed; bottom: auto;"> This line will be auto adjusted for bottom based on the browser. </p> </body> </html>
Producción:
Longitud : Establece la posición del borde inferior en px, cm también se permiten valores negativos.
Sintaxis:
bottom: 5px;
Ejemplo: Este ejemplo ilustra el uso de la propiedad bottom donde el valor de la propiedad se asigna como px.
HTML
<html> <head> <title> Bottom Property</title> </head> <body> <h1 style="color:darkgreen;">GeeksforGeeks</h1> <p style="position: fixed; bottom: 50px;"> This line will be adjusted for bottom based on the length provided, i.e. 50px. </p> <p style="position: fixed; bottom: -15px;"> This line will be adjusted for bottom based on the length provided, i.e. -15px. </p> </body> </html>
Producción:
Porcentaje: Establece la posición del borde inferior en % del elemento contenedor. Acepta los valores negativos.
Sintaxis:
bottom: 10%;
Ejemplo: Este ejemplo ilustra el uso de la propiedad inferior cuyo valor se asigna como un porcentaje.
HTML
<html> <head> <title> Bottom Property</title> </head> <body> <h1 style="color:darkgreen;">GeeksforGeeks</h1> <p style="position: fixed; bottom: 10%;"> This line will be adjusted for bottom based on the percentage provided, i.e. 10%. </p> <p style="position: fixed; bottom: -5%;"> This line will be adjusted for bottom based on the percentage provided, i.e. -5%. </p> </body> </html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado. La palabra clave inicial se puede utilizar para cualquier propiedad CSS y en cualquier elemento HTML.
Sintaxis:
bottom: initial;
Ejemplo: Este ejemplo ilustra el uso de la propiedad inferior cuyo valor se establece en su valor predeterminado.
HTML
<html> <head> <title> Bottom </title> </head> <body> <h1 style="color:darkgreen;">GeeksforGeeks</h1> <p style="position: fixed; bottom: initial;"> This line will be adjusted for bottom based on the initial value of the browser. </p> </body> </html>
Producción:
heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal. La palabra clave de herencia se puede utilizar para heredar cualquier propiedad CSS y en cualquier elemento HTML.
Sintaxis:
bottom: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad bottom cuyo valor se establece en heredar.
HTML
<html> <head> <title> Bottom </title> </head> <body> <h1 style="color:darkgreen;">GeeksforGeeks</h1> <p style="position: fixed; bottom: inherit;"> This line will inherit the position from the parent element. </p> </body> </html>
Producción:
Navegador compatible:
- Google Chrome 1.0
- Internet Explorer 5.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 6.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por MayankKhare y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA