Properti left

Properti left mengatur posisi tepi kiri elemen. Nilai untuk properti dapat ditulis dengan satuan ukuran yang umum digunakan, contohnya, dalam piksel, inci, poin, persen. Nilai yang ditetapkan juga dapat berupa angka negatif, dalam hal ini elemen akan saling tumpang tindih. Penghitungan koordinat ditentukan oleh properti position, yang biasanya mengambil nilai relative (posisi relatif) atau absolute (posisi absolut).

Sintaks

selektor {
	left: ukuran atau auto;
}

Contoh

Mari saat hover pada elemen anak atur posisi tepi kirinya menjadi 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;
}

Contoh

Sekarang mari saat hover, tepi kiri elemen anak diposisikan pada -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;
}

Lihat juga

properti bottom,
yang mengatur posisi tepi bawah elemen
properti top,
yang mengatur posisi tepi atas elemen
properti right,
yang mengatur posisi tepi kanan elemen
pseudoelemen ::backdrop,
yang mengatur posisi di belakang elemen pertama