Eigenschap left

De eigenschap left bepaalt de positie van de linkerrand van een element. Waarden voor de eigenschap kunnen worden opgegeven met algemeen aanvaarde maateenheden, bijvoorbeeld in pixels, inches, punten, procenten. De opgegeven waarden kunnen ook negatieve getallen zijn, in dat geval zullen elementen over elkaar heen worden geplaatst. De coördinatenberekening wordt bepaald door de eigenschap position, die meestal de waarde relative (relatieve positionering) of absolute (absolute positionering) aanneemt.

Syntaxis

selector {
	left: grootte of auto;
}

Voorbeeld

Laten we bij het hoveren over een kindelement de positie van de linkerrand instellen op 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;
}

Voorbeeld

En laten we nu bij het hoveren de linkerrand van het kindelement positioneren op -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;
}

Zie ook

de eigenschap bottom,
die de positie van de onderrand van een element bepaalt
de eigenschap top,
die de positie van de bovenrand van een element bepaalt
de eigenschap right,
die de positie van de rechterrand van een element bepaalt
het pseudoelement ::backdrop,
dat de positionering na het eerste element bepaalt