left Özelliği

left özelliği, bir öğenin sol kenarının konumunu belirler. Özellik için değerler, piksel, inç, punto, yüzde gibi yaygın boyut birimleriyle yazılabilir. Belirlenen değerler negatif sayılar da olabilir, bu durumda öğeler üst üste binecektir. Koordinatların sayımı, genellikle relative (göreli konum) veya absolute (mutlak konum) değerini alan position özelliği tarafından belirlenir.

Sözdizimi

seçici {
	left: boyut veya auto;
}

Örnek

Alt öğenin üzerine gelindiğinde, sol kenar konumunu 25px olarak ayarlayalım:

<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;
}

Örnek

Şimdi de alt öğenin üzerine gelindiğinde sol kenarının -50px konumunda olmasını sağlayalım:

<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;
}

Ayrıca Bakınız

bottom özelliği,
bir öğenin alt kenar konumunu belirler
top özelliği,
bir öğenin üst kenar konumunu belirler
right özelliği,
bir öğenin sağ kenar konumunu belirler
::backdrop sözde öğesi,
ilk öğeden sonraki konumu belirler