Ιδιότητα top

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

Σύνταξη

επιλογέας {
	top: μέγεθος ή 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-top: 50px;
	margin-left: 50px;
}
p:hover {
	top: 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;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	top: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Δείτε επίσης

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