elemento de orientación a la parte inferior de la div con CSS

Aquí, vamos a aprender cómo elemento de alineación a la parte inferior de la div con CSS (Cascading Style Sheet)?

El propiedad de fondo en CSS es útil para cambiar la posición vertical del elemento de posicionado. Esta propiedad no tiene efectos sobre elementos no posicionado.

de sintaxis Basic:

    Element{
bottom:length;
}

A continuación se presentan las consecuencias de los diferentes valores de posición en la propiedad fondo del div ,

position: absolute | fija

Cuando el valor de la posición es absoluta o fija entonces la propiedad de fondo es útil para fijar el borde inferior de un elemento a una unidad por encima o por debajo del borde inferior de su elemento posicionado más cercano.

Sintaxis:

    Element{
bottom:length;
position:fixed;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div0 {
background: pink;
padding: 10px;
width: 360px;
height: 40px;
}
.div1,
.div2,
.div3 {
float: left;
background: yellow;
border: 2px solid green;
width: 115px;
}
.div2 {
position: fixed;
bottom: 5px;
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<div class="div0">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>
</body>
</html>

salida

Aligning element to the bottom of the div using CSS - 4

En el ejemplo anterior, la posición de la div2 elemento es fijo y conjunto a la esquina izquierda inferior.

position: relative

Cuando el valor de la posición es relativa entonces la propiedad de fondo es útil para hacer que los elementos borde inferior para mover una unidad por encima o por debajo de su posición normal.

Sintaxis:

    Element{
bottom:length;
position:relative;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div0 {
background: pink;
padding: 10px;
width: 360px;
height: 40px;
}
.div1,
.div2,
.div3 {
float: left;
background: yellow;
border: 2px solid green;
width: 115px;
}
.div2 {
position: relative;
bottom: 5px;
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<div class="div0">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>
</body>
</html>

salida

Aligning element to the bottom of the div using CSS - 5

En el ejemplo anterior, la posición de la div2 es relativa a los otros dos divs .

posición: class

Si el valor de la posición es class entonces no afecta el elemento es decir cualquier cambio.

Sintaxis:

    Element{
bottom:length;
position:static;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div0 {
background: pink;
padding: 10px;
width: 360px;
height: 40px;
}
.div1,
.div2,
.div3 {
float: left;
background: yellow;
border: 2px solid green;
width: 115px;
}
.div2 {
position: static;
bottom: 5px;
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<div class="div0">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>
</body>
</html>

salida

Aligning element to the bottom of the div using CSS - 6

En el ejemplo anterior, no hay ningún cambio en la posición de la div2 .

posición: pegajoso

Si el valor de la posición es pegajoso a continuación, se comporta de propiedad inferiores como su posición es fija cuando el elemento está fuera de la ventana gráfica y su posición es relativa cuando está dentro.

Sintaxis:

    Element{
bottom:length;
position:sticky;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div0 {
background: pink;
padding: 10px;
width: 360px;
height: 40px;
}
.div1,
.div2,
.div3 {
float: left;
background: yellow;
border: 2px solid green;
width: 115px;
}
.div2 {
position: sticky;
bottom: 5px;
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<div class="div0">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>
</body>
</html>

salida

Aligning element to the bottom of the div using CSS - 7

En el ejemplo anterior, Div2 se comporta como su posición es fija con respecto a la otra dos divs .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *