Você pode usar position:absolute;
para posicionar absolutamente um elemento dentro de um div pai. Ao usar, position:absolute;
o elemento será posicionado absolutamente a partir do div pai primeiro posicionado; se não conseguir encontrar um, ele será posicionado absolutamente a partir da janela, portanto, você precisará ter certeza de que o div de conteúdo está posicionado.
Para posicionar o div de conteúdo, todos os position
valores que não são estáticos funcionarão, mas relative
é o mais fácil, pois não altera o posicionamento dos divs por si só.
Portanto, adicione position:relative;
ao div de conteúdo, remova o float do botão e adicione o seguinte css ao botão:
position: absolute;
right: 0;
bottom: 0;
position: relative
ao elemento que contém o botão + do formulário?div
, não à página. Se o rodapé também estiver contido nissodiv
, talvez eles simplesmente pareçam ser a mesma coisa. Se você sabe a altura do seu rodapé, no botão você pode usarbottom: HEIGHT_OF_FOOTERpx
.CSS3 flexbox também pode ser usado para alinhar o botão na parte inferior do elemento pai.
HTML necessário:
CSS necessário:
Captura de tela:
Recursos úteis:
Exibir trecho de código
fonte
O contêiner pai deve ter isto:
O botão em si deve ter isto:
ou o que você quiser
fonte
position:relative
o botão, ele será movido de sua posição original em vez de com base no pai.position: absolute
para isso a partir do canto inferior direito.Vai para a direita e pode ser usado da mesma forma para a esquerda
fonte