Propriedade CSS left

A propriedade left define o deslocamento horizontal de um elemento posicionado em relação ao seu bloco contentor. É uma das quatro propriedades de deslocamento — junto com right, top e bottom — que movem um elemento de onde ele normalmente estaria.

Ela especifica a distância entre a borda esquerda da margem do elemento e a borda esquerda do seu bloco contentor. Um valor positivo empurra o elemento para a direita; um valor negativo puxa-o para a esquerda. A propriedade left só tem efeito em elementos cuja position seja diferente do valor padrão static.

Como `left` funciona com `position`

O significado exato de left depende inteiramente de como o elemento está posicionado, por isso quase sempre se define position primeiro.

Se position estiver definido como absolute ou fixed, a propriedade left especifica a distância entre a borda esquerda do elemento e a borda esquerda do seu bloco contentor.
Se position estiver definido como relative, a propriedade left especifica a distância que a borda esquerda do elemento é deslocada para a direita a partir da sua posição normal.
Se position estiver definido como sticky, a propriedade left desloca o elemento em relação ao seu bloco contentor. O elemento se comporta como o posicionamento relative até cruzar um limiar de rolagem, após o qual se comporta como o posicionamento fixed.
Se position estiver definido como static (o padrão), a propriedade left não tem efeito.

Quando left e right são definidos em um elemento com posicionamento absoluto, left tem precedência em idiomas da esquerda para a direita (e right tem precedência em contextos da direita para a esquerda), a menos que width seja auto — caso em que o elemento se estende para satisfazer ambos.

Valor Inicial	auto
Aplicável a	Elementos posicionados.
Herdado	Não.
Animável	Sim. A posição do elemento é animável.
Versão	CSS2
Sintaxe DOM	Object.style.left = "50px";

Sintaxe

Sintaxe da propriedade CSS left

left: auto | length | initial | inherit;

Exemplo da propriedade left:

Exemplo da propriedade CSS left com a propriedade position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" />
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo de uso da propriedade `left` quando a imagem está dentro de um elemento `<div>`:

Exemplo da propriedade CSS left com a tag img

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade left especificada com porcentagens:

Exemplo da propriedade CSS left com valor percentual

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade left com todos os valores:

Exemplo da propriedade CSS left com valores auto, px e % (porcentagem)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
auto	O navegador definirá a posição da borda esquerda. É o valor padrão desta propriedade.	Experimente »
length	Define a posição da borda esquerda em px, cm etc. Valores negativos são permitidos.	Experimente »
%	Define a posição da borda esquerda como uma porcentagem da largura do bloco contentor. Valores negativos são permitidos.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Nota: Em elementos posicionados, left define o deslocamento horizontal a partir do bloco contentor. Se left e margin-left forem especificados, left tem precedência nos cálculos de posicionamento.

Quando usar `left`

Fixar elementos de UI em um canto. Combine position: fixed com left (e top) para manter um botão, emblema ou widget de chat no lugar enquanto a página rola.
Deslocar levemente um elemento. Com position: relative, um pequeno valor de left move um elemento do seu lugar natural sem retirá-lo do fluxo do documento, de modo que o conteúdo ao redor mantém seu espaço.
Sobreposições dentro de uma caixa. Dê ao contêiner position: relative e ao filho position: absolute, depois use left para posicionar o filho em relação a esse contêiner em vez de toda a página.

Para layouts que precisam suportar múltiplas direções de escrita, considere a propriedade lógica inset-inline-start: ela segue a direção do texto, mapeando para left em idiomas da esquerda para a direita e para right em idiomas da direita para a esquerda automaticamente.

Suporte dos navegadores

A propriedade left faz parte do CSS2 e funciona em todos os navegadores modernos, incluindo todas as versões do Chrome, Firefox, Safari, Edge e Opera.

Prática

O que pode ser alcançado com a propriedade 'left' no CSS?

É usada para posicionar um elemento a partir do lado esquerdo de um elemento contentor.É usada para posicionar um elemento a partir do lado superior de um elemento contentor.Só pode ser usada com elementos de posicionamento absoluto ou fixo.Pode ser usada com todos os tipos de elementos posicionados.Especifica o tamanho do recuo a partir da margem direita de um elemento.Especifica o tamanho do recuo a partir da margem esquerda de um elemento.

Como left funciona com position

Sintaxe

Exemplo da propriedade left:

Resultado

Exemplo de uso da propriedade left quando a imagem está dentro de um elemento <div>:

Exemplo da propriedade left especificada com porcentagens:

Exemplo da propriedade left com todos os valores:

Valores

Quando usar left

Suporte dos navegadores

Prática

Como `left` funciona com `position`

Exemplo de uso da propriedade `left` quando a imagem está dentro de um elemento `<div>`:

Quando usar `left`