CSS-006 — CSS Position: Έλεγχος της θέσης των στοιχείων

CSS-006 — CSS Position: Έλεγχος της θέσης των στοιχείων

Καλώς ήρθες σε ένα ακόμη μάθημα του Jerry's CodeLab! Στα προηγούμενα μαθήματα γνωρίσαμε το Box Model, το Padding, το Margin και την ιδιότητα Display. Τώρα θα μάθουμε πώς μπορούμε να ελέγχουμε τη θέση των HTML στοιχείων μέσα στη σελίδα μας.

Η ιδιότητα position της CSS μάς επιτρέπει να καθορίζουμε τον τρόπο με τον οποίο τοποθετείται ένα στοιχείο. Θα γνωρίσουμε τις πέντε βασικές τιμές της: static, relative, absolute, fixed και sticky.

1. Τι είναι η ιδιότητα Position;

Από προεπιλογή, τα HTML στοιχεία τοποθετούνται στη σελίδα σύμφωνα με τη φυσιολογική ροή του εγγράφου. Η ιδιότητα position μάς δίνει τη δυνατότητα να αλλάξουμε αυτόν τον τρόπο τοποθέτησης.

Μπορούμε να χρησιμοποιήσουμε τις ιδιότητες:

• top: απόσταση από πάνω.
• right: απόσταση από δεξιά.
• bottom: απόσταση από κάτω.
• left: απόσταση από αριστερά.

Οι παραπάνω ιδιότητες χρησιμοποιούνται για να καθορίσουν τη μετατόπιση ενός στοιχείου, ανάλογα με την τιμή του position.

2. Position: Static

Η τιμή static είναι η προεπιλεγμένη τιμή για τα HTML στοιχεία.

Το στοιχείο ακολουθεί τη φυσιολογική ροή της σελίδας και εμφανίζεται στη θέση που προκύπτει από τη διάταξη του εγγράφου.

.box {
  position: static;
}

Στην περίπτωση αυτή, οι ιδιότητες top, right, bottom και left δεν μετακινούν το στοιχείο.

3. Position: Relative

Με την τιμή relative, το στοιχείο παραμένει στη φυσιολογική ροή της σελίδας, αλλά μπορούμε να το μετακινήσουμε σε σχέση με την αρχική του θέση.

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

Στο παραπάνω παράδειγμα, το στοιχείο μετακινείται 20 pixels προς τα κάτω και 30 pixels προς τα δεξιά.

Προσοχή: Ο αρχικός χώρος του στοιχείου εξακολουθεί να δεσμεύεται στη σελίδα, ακόμη και μετά τη μετακίνησή του. Τα υπόλοιπα στοιχεία δεν μετακινούνται για να καλύψουν την αρχική του θέση.

4. Position: Absolute

Με την τιμή absolute, το στοιχείο αφαιρείται από τη φυσιολογική ροή του εγγράφου. Η θέση του καθορίζεται σε σχέση με τον κοντινότερο πρόγονό του που έχει τιμή position διαφορετική από static.

Αν δεν υπάρχει τέτοιος πρόγονος, η τοποθέτηση γίνεται σε σχέση με το αρχικό block περιέκτη (initial containing block).

Ας δούμε ένα παράδειγμα:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

Εδώ το στοιχείο .child τοποθετείται 10 pixels από την επάνω και 10 pixels από τη δεξιά πλευρά του στοιχείου .parent.

Γι' αυτό συχνά χρησιμοποιούμε τον συνδυασμό position: relative στον γονέα και position: absolute στο παιδί.

5. Position: Fixed

Με την τιμή fixed, ένα στοιχείο τοποθετείται σε σταθερή θέση σε σχέση με το παράθυρο προβολής (viewport) στις συνηθισμένες περιπτώσεις.

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Το στοιχείο παραμένει στην ίδια θέση στην οθόνη ακόμη και όταν ο επισκέπτης κάνει κύλιση (scroll) στη σελίδα.

Μπορούμε να χρησιμοποιήσουμε αυτή την ιδιότητα για κουμπιά επιστροφής στην κορυφή ή για στοιχεία που θέλουμε να παραμένουν ορατά.

6. Position: Sticky

Η τιμή sticky συνδυάζει στοιχεία της φυσιολογικής ροής με τη συμπεριφορά ενός σταθεροποιημένου στοιχείου κατά την κύλιση.

.sticky-header {
  position: sticky;
  top: 0;
}

Το στοιχείο αρχικά βρίσκεται στη φυσιολογική του θέση. Όταν η κύλιση φτάσει στο όριο που έχουμε ορίσει, παραμένει ορατό σε εκείνη τη θέση, μέσα στα όρια του κατάλληλου περιέκτη κύλισης.

Για να λειτουργήσει σωστά, πρέπει να ορίσουμε τουλάχιστον μία από τις ιδιότητες μετατόπισης, όπως το top.

7. Τι είναι το Z-Index;

Όταν δύο ή περισσότερα στοιχεία επικαλύπτονται, μπορούμε να ελέγξουμε ποιο θα εμφανίζεται μπροστά από τα υπόλοιπα χρησιμοποιώντας την ιδιότητα z-index.

.box-one {
  position: relative;
  z-index: 1;
}

.box-two {
  position: relative;
  z-index: 2;
}

Στο παράδειγμα, το δεύτερο στοιχείο έχει μεγαλύτερη τιμή z-index και μπορεί να εμφανιστεί μπροστά από το πρώτο, όταν τα δύο στοιχεία ανήκουν στο κατάλληλο stacking context.

Σημαντικό: Το z-index δεν συγκρίνεται πάντα απευθείας ανάμεσα σε όλα τα στοιχεία της σελίδας. Τα stacking contexts επηρεάζουν τη σειρά εμφάνισης.

8. Δοκίμασε το στο Playground!

Ώρα για πρακτική εξάσκηση! Άνοιξε το Playground και δοκίμασε να αλλάξεις τις τιμές των ιδιοτήτων. Παρατήρησε πώς μετακινούνται τα στοιχεία και πώς αλλάζει η συμπεριφορά τους.

RUN ON PLAYGROUND

Μερικές ιδέες για πειραματισμό:

• Άλλαξε το top και το left στο στοιχείο με position: relative.
• Μετακίνησε το απόλυτα τοποθετημένο στοιχείο αλλάζοντας το top και το right.
• Άλλαξε το bottom και το right στο σταθερό στοιχείο.
• Κάνε κύλιση μέσα στο πλαίσιο και παρατήρησε τη συμπεριφορά του sticky στοιχείου.
• Δοκίμασε διαφορετικές τιμές στο z-index.

9. Συνηθισμένα λάθη

• Να περιμένουμε ότι το top και το left θα λειτουργήσουν σε ένα στοιχείο με position: static.
• Να ξεχνάμε ότι το absolute αφαιρεί το στοιχείο από τη φυσιολογική ροή.
• Να περιμένουμε από το relative να απελευθερώσει τον αρχικό χώρο του στοιχείου.
• Να χρησιμοποιούμε sticky χωρίς να ορίσουμε κάποια ιδιότητα μετατόπισης.
• Να θεωρούμε ότι ένα πολύ μεγάλο z-index θα εμφανίσει οπωσδήποτε το στοιχείο πάνω από όλα τα άλλα.

10. Ανακεφαλαίωση

• static: Η φυσιολογική τοποθέτηση.
• relative: Μετακίνηση σε σχέση με την αρχική θέση, χωρίς απώλεια του αρχικού χώρου.
• absolute: Τοποθέτηση εκτός φυσιολογικής ροής, σε σχέση με τον κατάλληλο πρόγονο.
• fixed: Σταθερή τοποθέτηση σε σχέση με το viewport στις συνηθισμένες περιπτώσεις.
• sticky: Το στοιχείο ακολουθεί αρχικά τη φυσιολογική ροή και σταθεροποιείται κατά την κύλιση.
• z-index: Ελέγχει τη σειρά εμφάνισης των στοιχείων μέσα στα stacking contexts.

Συγχαρητήρια! Ολοκλήρωσες ένα ακόμη μάθημα CSS στο Jerry's CodeLab. Τώρα γνωρίζεις πώς να ελέγχεις τη θέση των στοιχείων και έχεις κάνει ένα σημαντικό βήμα προς τη δημιουργία πιο σύνθετων διατάξεων!