Απόλυτη τοποθέτηση στοιχείων στο CSS

Σε αυτό το μάθημα θα αναλύσουμε την απόλυτη τοποθέτηση στοιχείων. Επιτρέπει την τοποθέτηση στοιχείων σε καθορισμένες συντεταγμένες της σελίδας. Για παράδειγμα, μπορείτε να τοποθετήσετε ένα στοιχείο στη θέση 100px από την κορυφή της σελίδας και 200px από αριστερά. Το στοιχείο θα μετακινηθεί εκεί, ανεξάρτητα από το τι άλλα στοιχεία θα βρίσκονται εκεί και απλά θα εμφανιστεί πάνω από αυτά. Λέμε ότι σε αυτή την περίπτωση το στοιχείο βγαίνει από την κανονική ροή του εγγράφου: όλα τα άλλα στοιχεία θα συμπεριφέρονται σαν το στοιχείο μας να μην υπάρχει.

Για να κάνετε ένα στοιχείο απόλυτα τοποθετημένο, πρέπει να ορίσετε σε αυτό το στοιχείο την ιδιότητα position με τιμή absolute. Εκτός από αυτή την ιδιότητα, χρειάζονται άλλες δύο: μία θα ορίζει τη συντεταγμένη κατά την κάθετη, και η δεύτερη - την οριζόντια.

Για την κάθετη πρέπει να ορίσετε είτε απόσταση από πάνω, είτε από κάτω. Η απόσταση από πάνω ορίζεται από την ιδιότητα top, και η απόσταση από κάτω - από την ιδιότητα bottom. Για την οριζόντια πρέπει να ορίσετε απόσταση είτε από αριστερά, είτε από δεξιά. Η απόσταση από αριστερά ορίζεται από την ιδιότητα left, και η απόσταση από δεξιά - από την ιδιότητα right.

Ας δούμε μερικά παραδείγματα.

Παράδειγμα

Αρχικά, ας φτιάξουμε δύο απλά μπλοκ χωρίς τοποθέτηση (παρατηρήστε ότι τα στοιχεία δεν είναι κολλημένα στην άκρη του παραθύρου, καθώς το body έχει margin από προεπιλογή):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Παράδειγμα

Ας ορίσουμε τώρα απόλυτη τοποθέτηση για το πράσινο μπλοκ, τοποθετώντας το στη θέση 150px από πάνω και 100px από αριστερά:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Παράδειγμα

Ας τοποθετήσουμε τώρα το πράσινο μπλοκ στη θέση 0px από πάνω και 0px από αριστερά:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Παράδειγμα

Ας τοποθετήσουμε τώρα το πράσινο μπλοκ στη θέση 0px από πάνω και 0px από δεξιά:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Παράδειγμα

Ας τοποθετήσουμε τώρα το πράσινο μπλοκ στη θέση 0px από κάτω και 0px από δεξιά:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Παράδειγμα

Ας τοποθετήσουμε τώρα το πράσινο μπλοκ στη θέση 0px από κάτω και 0px από αριστερά:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Πρακτικές ασκήσεις

Χρησιμοποιώντας απόλυτη τοποθέτηση, τοποθετήστε τα μπλοκ ως εξής: