left
La propiedad left en CSS es una propiedad de desplazamiento (offset) que se usa para posicionar un elemento horizontalmente. Sin embargo, solo funciona si el elemento tiene una propiedad position que no sea static (es decir, relative, absolute, fixed, o sticky).
- Con position: static → No tiene ningún efecto esta propiedad.
- Con position: relative → Esto movería el elemento hacia la derecha. Este valor puede ser negativo consiguiendo el efecto contrario.
- Con position: absolute/sticky → Desplaza el elemento desde el borde izquierdo de su punto de referencia. Este valor puede ser negativo consiguiendo el efecto contrario.
- Con position: fixed → Definiría la distancia del elemento en su parte izquierda con respecto a la ventana de la página web. Este valor puede ser negativo consiguiendo el efecto contrario.
<div class="caja caja-normal">Caja Normal</div>
<div class="caja caja-relative">Caja Relative (left: 50px)</div>
<div class="caja caja-normal">Caja Siguiente</div>Valores que puede tener la propiedad left
- length: Valor fijo en px, ems, em, etc.
- %: Un porcentaje del ancho del bloque contenedor.
- auto: El navegador determina la posición. Es el valor por defecto.
- initial/inherit: Restablece el valor o lo hereda del padre.
En conclusión, left es la herramienta para controlar la posición horizontal de un elemento, pero siempre debe ir acompañada de una propiedad position para que tenga efecto.