Ιδιότητα left

Η ιδιότητα left ορίζει τη θέση της αριστερής άκρης του στοιχείου. Οι τιμές για την ιδιότητα μπορούν να οριστούν με τις γενικά αποδεκτές μονάδες μέτρησης, για παράδειγμα, σε pixels, ίντσες, πόντους, ποσοστά. Οι τιμές που ορίζονται μπορούν να είναι και αρνητικοί αριθμοί, σε αυτή την περίπτωση τα στοιχεία θα επικαλύπτονται το ένα με το άλλο. Η μέτρηση των συντεταγμένων καθορίζεται από την ιδιότητα position, η οποία συνήθως παίρνει την τιμή relative (σχετική θέση) ή absolute (απόλυτη θέση).

Σύνταξη

επιλογέας {
	left: μέγεθος ή auto;
}

Παράδειγμα

Ας ορίσουμε, όταν το ποντίκι περνάει πάνω από το θυγατρικό στοιχείο, τη θέση της αριστερής του άκρης ίση με 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;
}

Παράδειγμα

Και τώρα ας γίνει, όταν το ποντίκι περνάει πάνω, η αριστερή άκρη του θυγατρικού στοιχείου να τοποθετείται στα -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;
}

Δείτε επίσης

την ιδιότητα bottom,
που ορίζει τη θέση της κάτω άκρης του στοιχείου
την ιδιότητα top,
που ορίζει τη θέση της πάνω άκρης του στοιχείου
την ιδιότητα right,
που ορίζει τη θέση της δεξιάς άκρης του στοιχείου
τον ψευδο-στοιχείο ::backdrop,
που ορίζει τη θέση μετά το πρώτο στοιχείο