Propriété left

La propriété left définit la position du bord gauche d'un élément. Les valeurs de cette propriété peuvent être spécifiées avec les unités de mesure courantes, par exemple, en pixels, pouces, points, pourcentages. Les valeurs définies peuvent également être des nombres négatifs, dans ce cas, les éléments se superposeront les uns aux autres. Le point de référence des coordonnées est déterminé par la propriété position, qui prend généralement la valeur relative (position relative) ou absolute (position absolue).

Syntaxe

sélecteur {
	left: taille ou auto;
}

Exemple

Lors du survol d'un élément enfant, définissons la position de son bord gauche à 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;
}

Exemple

Maintenant, lors du survol, que le bord gauche de l'élément enfant soit positionné à -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;
}

Voir aussi

la propriété bottom,
qui définit la position du bord inférieur d'un élément
la propriété top,
qui définit la position du bord supérieur d'un élément
la propriété right,
qui définit la position du bord droit d'un élément
le pseudo-élément ::backdrop,
qui définit le positionnement derrière le premier élément