Propiedad CSS left

La propiedad left define el desplazamiento horizontal de un elemento posicionado respecto a su bloque contenedor. Es una de las cuatro propiedades de desplazamiento — junto con right, top y bottom — que mueven un elemento desde donde normalmente estaría ubicado.

Especifica la distancia entre el borde izquierdo del margen del elemento y el borde izquierdo de su bloque contenedor. Un valor positivo empuja el elemento hacia la derecha; un valor negativo lo arrastra hacia la izquierda. La propiedad left solo tiene efecto en elementos cuya position es distinta del valor predeterminado static.

Cómo funciona `left` con `position`

El significado exacto de left depende completamente de cómo esté posicionado el elemento, por lo que casi siempre se establece position primero.

Si position está establecido en absolute o fixed, la propiedad left especifica la distancia entre el borde izquierdo del elemento y el borde izquierdo de su bloque contenedor.
Si position está establecido en relative, la propiedad left especifica la distancia que el borde izquierdo del elemento se desplaza hacia la derecha desde su posición normal.
Si position está establecido en sticky, la propiedad left desplaza el elemento respecto a su bloque contenedor. El elemento se comporta como relative hasta que cruza un umbral de desplazamiento, momento en que se comporta como fixed.
Si position está establecido en static (el valor predeterminado), la propiedad left no tiene efecto.

Cuando tanto left como right se establecen en un elemento con posicionamiento absoluto, left tiene prioridad en idiomas de izquierda a derecha (y right gana en contextos de derecha a izquierda), a menos que width sea auto — en ese caso el elemento se estira para satisfacer ambos.

Valor inicial	auto
Se aplica a	Elementos posicionados.
Heredable	No.
Animatable	Sí. La posición del elemento es animable.
Versión	CSS2
Sintaxis DOM	Object.style.left = "50px";

Sintaxis

Sintaxis de la propiedad CSS left

left: auto | length | initial | inherit;

Ejemplo de la propiedad left:

Ejemplo de la propiedad CSS left con la propiedad 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>

Pruébalo tú mismo »

Resultado

Ejemplo del uso de la propiedad `left` cuando la imagen está dentro de un elemento `<div>`:

Ejemplo de la propiedad CSS left con la etiqueta 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>

Pruébalo tú mismo »

Ejemplo de la propiedad left especificada con porcentajes:

Ejemplo de la propiedad CSS left con valor en porcentaje

<!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>

Pruébalo tú mismo »

Ejemplo de la propiedad left con todos los valores:

Ejemplo de la propiedad CSS left con valores auto, px y % (porcentaje)

<!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>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
auto	El navegador establecerá la posición del borde izquierdo. Es el valor predeterminado de esta propiedad.	Pruébalo »
length	Establece la posición del borde izquierdo en px, cm, etc. Se permiten valores negativos.	Pruébalo »
%	Establece la posición del borde izquierdo como porcentaje del ancho del bloque contenedor. Se permiten valores negativos.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Nota: En elementos posicionados, left define el desplazamiento horizontal desde el bloque contenedor. Si se especifican tanto left como margin-left, left tiene prioridad en los cálculos de posicionamiento.

Cuándo usar `left`

Fijar la interfaz en una esquina. Combina position: fixed con left (y top) para mantener un botón, una insignia o un widget de chat en su lugar mientras la página se desplaza.
Ajustar un elemento. Con position: relative, un valor pequeño de left desplaza un elemento desde su posición natural sin sacarlo del flujo del documento, por lo que el contenido circundante conserva su espacio.
Superposiciones dentro de una caja. Aplica position: relative al contenedor y position: absolute al hijo; entonces left posiciona al hijo relativo a ese contenedor en lugar de a toda la página.

Para diseños que deben admitir múltiples direcciones de escritura, considera la propiedad lógica inset-inline-start: sigue la dirección del texto, mapeándose a left en idiomas de izquierda a derecha y a right en idiomas de derecha a izquierda de forma automática.

Compatibilidad con navegadores

La propiedad left es parte de CSS2 y funciona en todos los navegadores modernos, incluidas todas las versiones de Chrome, Firefox, Safari, Edge y Opera.

Práctica

¿Qué se puede lograr con la propiedad 'left' en CSS?

Se usa para posicionar un elemento desde el lado izquierdo de un elemento contenedor.Se usa para posicionar un elemento desde el lado superior de un elemento contenedor.Solo se puede usar con elementos con posicionamiento absolute o fixed.Se puede usar con todos los tipos de elementos posicionados.Especifica el tamaño de sangría desde el margen derecho de un elemento.Especifica el tamaño de sangría desde el margen izquierdo de un elemento.

Cómo funciona left con position

Sintaxis

Ejemplo de la propiedad left:

Resultado

Ejemplo del uso de la propiedad left cuando la imagen está dentro de un elemento <div>:

Ejemplo de la propiedad left especificada con porcentajes:

Ejemplo de la propiedad left con todos los valores:

Valores

Cuándo usar left

Compatibilidad con navegadores

Práctica

Cómo funciona `left` con `position`

Ejemplo del uso de la propiedad `left` cuando la imagen está dentro de un elemento `<div>`:

Cuándo usar `left`