Propriedade CSS bottom
A propriedade CSS bottom define a posição inferior de um elemento em combinação com a propriedade position. Veja exemplos e experimente.
A propriedade CSS bottom define a posição vertical de um elemento posicionado em relação ao seu bloco contentor. Ela funciona apenas quando o elemento tem um valor de position diferente de static, e um valor positivo empurra a borda inferior do elemento para cima, afastando-a da borda inferior da sua caixa de referência.
Observação: A propriedade bottom não tem efeito em elementos com position: static (o padrão), portanto nada acontece até que você defina também o position.
Como o position altera o efeito
A caixa de referência a partir da qual bottom mede depende inteiramente do valor de position do elemento:
relative—bottomdesloca o elemento a partir da sua posição normal.bottom: 20pxmove-o 20px para cima em relação à posição em que estaria, sem afetar o layout dos elementos vizinhos.absolute— o elemento é posicionado em relação ao seu ancestral posicionado mais próximo (um ancestral cujopositionnão sejastatic).bottom: 0fixa-o na parte inferior desse ancestral.fixed— o elemento é posicionado em relação ao viewport e permanece fixo enquanto a página rola.sticky— o elemento se comporta comorelativeaté que o seu contêiner de rolagem atinja um limiar, após o qual se comporta comofixed.
bottom vs. top
Se tanto top quanto bottom estiverem definidos no mesmo elemento, top prevalece quando o elemento tem altura fixa (para position: absolute/fixed), pois top é resolvido primeiro. Se a altura for auto, definir tanto top quanto bottom estica o elemento para preencher o espaço entre os dois deslocamentos — uma forma prática de fazer uma caixa absolutamente posicionada tão alta quanto o seu contêiner sem especificar uma altura.
Valores em porcentagem
Um bottom em porcentagem é calculado a partir da altura do bloco contentor, não do próprio elemento. Se o bloco contentor não tiver altura explícita, deslocamentos em porcentagem podem ser resolvidos como 0 ou ignorados, portanto prefira unidades de comprimento (px, em, rem) quando a altura do pai for desconhecida.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A posição inferior pode ser animada. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.bottom = "10px"; |
Sintaxe
Sintaxe da propriedade CSS bottom
bottom: auto | length | percentage | initial | inherit;Exemplo da propriedade bottom:
Exemplo da propriedade CSS bottom com o valor position absolute
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Resultado
Exemplo da propriedade bottom com todas as posições:
Exemplo da propriedade CSS bottom com todas as posições
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</div>
</div>
<br />
<div class="fixed"><strong>position: fixed and bottom 50px</strong>
<br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
<div class="parent">
This div element has position: relative.
<div class="sticky"><strong>position: sticky and bottom 10px</strong>
<br />This div is sticky.</div>
</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Este é o valor padrão. Deixa o navegador calcular a posição da borda inferior. | Experimente » |
| percentage | Define a posição do elemento em porcentagens da altura do bloco contentor. | |
| length | Define a posição do elemento em px, cm, etc. Valores negativos são permitidos. | Experimente » |
| initial | Define a propriedade para o seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
O deslocamento bottom é uma das quatro propriedades de deslocamento de caixa que funcionam em conjunto com position:
- top — define o deslocamento vertical a partir da borda superior da caixa de referência.
- left — define o deslocamento horizontal a partir da borda esquerda.
- right — define o deslocamento horizontal a partir da borda direita.
Um padrão comum é fixar um elemento em um canto, por exemplo position: absolute; bottom: 0; right: 0; para ancorar um emblema no canto inferior direito do seu contêiner.