Propriedade left
Última atualização: 2026-09-13
left Propriedade left
A propriedade left define o deslocamento de um elemento posicionado a partir da borda esquerda de seu bloco contêiner, medido para a direita. Ela se aplica apenas a elementos posicionados não estáticos e está entre as propriedades de deslocamento mais usadas, normalmente combinada com posicionamento absolute ou fixed para posicionamento preciso à esquerda.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
left: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Sem deslocamento. |
<length> | <percentage> | Tipo | Um deslocamento a partir da borda esquerda 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 |
|---|---|---|---|---|---|
| left | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： left 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 layouts adaptáveis.
❓ Perguntas Frequentes
QO que acontece quando left e right são definidos juntos?
APara elementos absolute ou fixed sem largura, o elemento se estica da esquerda para a direita, preenchendo o espaço horizontal de forma adaptável; por exemplo, .overlay { position:absolute; left:0; right:0; } ocupa a largura total. Se uma largura for definida, left prevalece e right é ignorado em texto LTR. Esse é um padrão preferido para barras de largura total e camadas de sobreposição, permitindo que o elemento redimensione com a viewport automaticamente.
QA porcentagem de left é relativa a quê?
AA porcentagem é calculada com base na largura 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 própria posição original do elemento. Por exemplo, left:50% coloca a borda esquerda do elemento na metade da largura do bloco contêiner, frequentemente combinada com transform:translateX(-50%) para centralização horizontal.
QComo centralizo horizontalmente com left:50%?
ADefina o elemento como position:absolute, com o pai position:relative, use left:50% para que sua borda esquerda fique no meio do contêiner e aplique transform:translateX(-50%) para deslocá-lo para a esquerda metade de sua própria largura; essa é a técnica clássica de centralização horizontal. Uma alternativa moderna mais limpa é o pai flex com display:flex; justify-content:center, que elimina completamente os números mágicos. O mesmo truque translateX funciona com right:50% para centralizar a partir da borda direita.
QPor que o left não está funcionando?
AO motivo mais comum é que position ainda é static, já que left funciona apenas em elementos posicionados. Em seguida, se width e right estiverem definidos, left prevalece sobre right em texto LTR; se você esperava que right se aplicasse, remova left ou width. Por fim, confirme que o valor é válido, ou seja, auto, length ou percentage. Verifique o position e as propriedades conflitantes passo a passo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
right (Deslocamento à direita)
A propriedade que desloca a partir da borda direita.
Propriedade position
Aprenda os pré-requisitos para left ter efeito.
