Propriedade bottom
Última atualização: 2026-09-13
bottom Propriedade bottom
A propriedade bottom define o deslocamento de um elemento posicionado a partir da borda inferior de seu bloco contêiner, medido para cima. Ela se aplica apenas a elementos posicionados não estáticos e é normalmente usada com posicionamento absolute ou fixed para alinhar elementos à parte inferior ou esticar sua altura.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
bottom: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Sem deslocamento. |
<length> | <percentage> | Tipo | Um deslocamento a partir da borda inferior do bloco contêiner. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| bottom | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： bottom afeta apenas elementos posicionados não estáticos; não tem efeito em position:static.
Dica： Uma porcentagem é calculada com base na altura do bloco contêiner. Definir top e bottom juntos (sem uma altura) estica o elemento para preencher o espaço vertical.
❓ Perguntas Frequentes
QO que acontece quando top e bottom são definidos juntos?
APara posicionamento absolute ou fixed sem altura, o elemento se estica para preencher o espaço entre top e bottom, permitindo esticamento vertical adaptável; com uma altura definida, top prevalece e bottom é ignorado. Com posicionamento relative, top tem prioridade. Essa técnica é frequentemente usada para camadas de fundo de altura total e regiões flexíveis entre uma barra inferior e um elemento alinhado ao topo, dando à caixa uma altura que se ajusta automaticamente.
QA porcentagem de bottom é relativa a quê?
AA porcentagem é calculada com base na altura do bloco contêiner. Para elementos absolute, o bloco contêiner é a caixa de padding do ancestral posicionado mais próximo; para fixed, é a viewport; para relative, é a posição original do elemento. Por exemplo, bottom:0 alinha a borda inferior do elemento com a parte inferior do bloco contêiner, e combiná-lo com left:0; right:0 faz o elemento encostar na parte inferior e esticar a largura total.
QComo fixo um botão ou barra de ferramentas na parte inferior?
APara fixá-lo na parte inferior da viewport, use position:fixed; bottom:0; left:0; right:0, e ele permanece no lugar durante a rolagem; dê ao body um padding-bottom para que o conteúdo não fique escondido embaixo. Para fixá-lo dentro de um contêiner, torne o pai position:relative e o filho position:absolute; bottom:0; left:0; right:0. Ambos são comuns para barras de ferramentas e barras de ação inferiores, e a variante fixed é a base das barras de aplicativos móveis.
QQual tem prioridade maior: bottom ou top?
AQuando o elemento tem uma altura, top prevalece e bottom é ignorado, já que top é preferido por padrão na direção vertical do LTR. Sem uma altura, top e bottom juntos determinam a altura do elemento esticando-o para preencher a lacuna, de forma semelhante a como left e right funcionam na horizontal. Para controle preciso, defina apenas um deles para que o comportamento permaneça previsível.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
top (Deslocamento superior)
A propriedade que desloca a partir da borda superior.
Propriedade position
Aprenda os pré-requisitos para bottom ter efeito.
