Propriedade right
Última atualização: 2026-09-13
right Propriedade right
A propriedade right define o deslocamento de um elemento posicionado a partir da borda direita de seu bloco contêiner, medido para a esquerda. Ela se aplica apenas a elementos posicionados não estáticos e é normalmente usada com posicionamento absolute ou fixed para alinhar elementos à direita.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
right: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Sem deslocamento. |
<length> | <percentage> | Tipo | Um deslocamento a partir da borda direita 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 |
|---|---|---|---|---|---|
| right | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： right afeta apenas elementos posicionados não estáticos; não tem efeito em position:static.
Dica： Uma porcentagem é calculada com base na largura do bloco contêiner. Definir left e right juntos estica a largura do elemento para preencher o espaço entre eles.
❓ Perguntas Frequentes
QO que acontece quando left e right são definidos juntos?
APara elementos absolute ou fixed sem largura, o elemento se estica para preencher o espaço entre left e right, criando um layout de largura adaptável; por exemplo, .bar { position:absolute; left:0; right:0; } ocupa todo o espaço horizontal. Se uma largura for definida, left prevalece e right é ignorado em texto LTR. Esse é um padrão útil para sobreposições e barras de largura total.
QQual tem prioridade maior: right ou left?
ADepende do modo de escrita. Em LTR, texto da esquerda para a direita como inglês e chinês, left tem prioridade e right é ignorado quando ambos são definidos; em RTL, texto da direita para a esquerda como o árabe, right tem prioridade. Além disso, se nenhuma largura for definida, ambos atuam juntos para esticar o elemento. Essa regra faz os layouts seguirem a direção da escrita, mas é um comportamento sensível à direção que deve ser observado.
QPor que o right não está funcionando?
AMotivos comuns: primeiro, o position do elemento é static, já que right afeta apenas elementos posicionados; segundo, tanto uma largura quanto um left estão definidos, e left prevalece em LTR, tornando right ineficaz; terceiro, equívoco quanto à referência, pois absolute posiciona em relação à borda direita do ancestral posicionado mais próximo, enquanto fixed posiciona em relação à borda direita da viewport. Verifique primeiro position e as propriedades conflitantes e confirme a direção do deslocamento.
QComo fixo um elemento no lado direito de um contêiner?
ADê ao pai position:relative e ao filho position:absolute; right:0, opcionalmente com top ou bottom para a posição vertical, e o filho então encosta na borda direita do pai. Para fixá-lo à direita da viewport, use position:fixed; right:20px; top:20px diretamente, o que é comum para botões de voltar ao topo e widgets de bate-papo flutuantes. Adicione um z-index quando várias camadas flutuantes se sobrepõem.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
left (Deslocamento à esquerda)
A propriedade que desloca a partir da borda esquerda.
Propriedade position
Aprenda os pré-requisitos para right ter efeito.
