Propiedad left

La propiedad left establece la posición del borde izquierdo del elemento. Los valores para la propiedad se pueden especificar con unidades de medida comunes, por ejemplo, en píxeles, pulgadas, puntos, porcentajes. Los valores establecidos también pueden ser números negativos, en este caso los elementos se superpondrán unos a otros. El cálculo de las coordenadas está determinado por la propiedad position, que normalmente toma el valor relative (posición relativa) o absolute (posición absoluta).

Sintaxis

selector {
	left: tamaño o auto;
}

Ejemplo

Al pasar el cursor sobre el elemento hijo establezcamos la posición de su borde izquierdo en 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	left: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Ejemplo

Ahora, al pasar el cursor, que el borde izquierdo del elemento hijo esté posicionado a -50px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	left: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Véase también

propiedad bottom,
que establece la posición del borde inferior del elemento
propiedad top,
que establece la posición del borde superior del elemento
propiedad right,
que establece la posición del borde derecho del elemento
pseudoelemento ::backdrop,
que establece la posición detrás del primer elemento