| Definición | Indica el desplazamiento entre el borde izquierdo del elemento y la parte izquierda de su elemento contenedor |
|---|---|
| Valores permitidos | Alguno o todos los siguientes valores y en cualquier orden: |
| Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra | |
| Valor inicial | auto |
| Se aplica a | Los elementos posicionados |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS2/visuren.html#propdef-left |
Ejemplos de uso
La propiedad left permite desplazar un elemento respecto a su posición original tomando como referencia el borde izquierdo del elemento. Por su propia definición, esta propiedad sólo afecta a los elementos cuya propiedad position tenga un valor de relative, absolute o fixed.
El siguiente ejemplo muestra tres cajas idénticas posicionadas de forma relativa (position: relative) y que sólo se diferencian en el valor de su propiedad left:
left: 20px;
}
left: 0;
}
left: -20px;
}
Los valores positivos en la propiedad left hacen que la caja se mueva hacia la derecha respecto a su posición original. En otras palabras, la propiedad left: 20px se interpreta de la siguiente manera: "mueve la caja hacia la derecha hasta que su borde izquierdo quede a 20px de distancia de la posición que originalmente tenía ese borde izquierdo".
De la misma manera, los valores negativos en la propiedad left hacen que la caja se mueva hacia la izquierda respecto a su posición original. En otras palabras, la propiedad left: -20px se interpreta de la siguiente manera: "mueve la caja hacia la izquierda hasta que su borde izquierdo quede a 20px de distancia de la posición que originalmente tenía ese borde izquierdo".
Para indicar el valor de la propiedad left puedes utilizar cualquiera de las medidas definidas por CSS. En el siguiente ejemplo, los valores 20px y -20px del ejemplo anterior se han reemplazado por 2em y -2em respecticamente. Este cambio hace que la caja se mueva hacia la izquierda/derecha más o menos en función del propio tamaño de letra de esa caja:
left: 2em;
}
left: 0;
}
left: -2em;
}
Si el valor de la propiedad left se indica mediante porcentajes, su referencia es la anchura de la caja que contiene a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad left: 50% desplazaría la caja hacia la derecha una distancia igual a la mitad de la anchura de su caja padre.
En el siguiente ejemplo, como la anchura del <div> padre es de 400px y los <div> interiores se desplazan un 25%, en realidad el desplazamiento efectivo será de 100px (el 25% de 400px):
left: 25%;
}
left: 0;
}
left: -25%;
}
La propiedad left se puede utilizar por ejemplo para desplazar ligeramente los elementos de una lista cuando se pasa el ratón por encima:
(pasa el ratón por encima de los elementos de la lista)
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Fusce ut leo eu ipsum faucibus pretium
- Donec iaculis lorem eleifend
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:hover {
position: relative;
left: 5px;
}Si el elemento que se quiere desplazar con la propiedad left está posicionado de forma absoluta (position: absolute), la interpretación del valor de la propiedad left es muy diferente. En este caso, el origen de coordenadas es el borde izquierdo de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde izquierdo de la caja padre.
Por otra parte, cuando el elemento que se desplaza está posicionado de forma absoluta, los valores de la propiedad left indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma relativa. Por tanto, si la caja padre tiene una anchura de 300px y el desplazamiento es del 10%, en realidad la caja se está desplazando 30px.