Respuestas:
Puede usar position:absolute;
para posicionar absolutamente un elemento dentro de un div padre. Cuando se usa, position:absolute;
el elemento se posicionará absolutamente desde el primer div principal posicionado, si no puede encontrar uno, se posicionará absolutamente desde la ventana, por lo que deberá asegurarse de que el div de contenido esté posicionado.
Para hacer que el contenido esté posicionado en div, todos los position
valores que no son estáticos funcionarán, pero relative
es el más fácil ya que no cambia la posición de los divs por sí mismo.
Así que agregue position:relative;
al div de contenido, elimine el flotador del botón y agregue el siguiente CSS al botón:
position: absolute;
right: 0;
bottom: 0;
div
, no a la página. Si el pie de página también está incluido en esto div
, tal vez parezcan ser lo mismo. Si conoce la altura de su pie de página, en el botón puede utilizar bottom: HEIGHT_OF_FOOTERpx
.
CSS3 flexbox también se puede usar para alinear el botón en la parte inferior del elemento principal.
HTML requerido:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
CSS necesario:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Captura de pantalla:
Recursos útiles:
El contenedor principal debe tener esto:
position: relative;
El propio botón tiene que tener esto:
position: relative;
bottom: 20px;
right: 20px;
o lo que quieras
position:relative
el botón se moverá de su posición original en lugar de basarse en el padre.
position: absolute
para hacerlo desde la parte inferior derecha.
Va a la derecha y se puede utilizar de la misma forma para la izquierda.
.yourComponent
{
float: right;
bottom: 0;
}
position: relative
al elemento que contiene tu formulario + botón?