Τρόπος χρήσης της ιδιότητας θέσης στο CSS για την ευθυγράμμιση στοιχείων

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

Υπάρχουν διαφορετικοί τρόποι / μέθοδοι για την τοποθέτηση στοιχείων με καθαρό CSS. Χρησιμοποιώντας CSS float, οι ιδιότητες οθόνης και θέσης είναι οι πιο συνηθισμένες μέθοδοι.

Σε αυτό το άρθρο, θα εξηγήσω έναν από τους πιο συγκεχυμένους τρόπους ευθυγράμμισης στοιχείων με καθαρό CSS: την ιδιότητα θέσης. Έχω επίσης ένα άλλο σεμινάριο για το CSS Display Properti εδώ.

Αν προτιμάτε, μπορείτε να παρακολουθήσετε την έκδοση βίντεο του CSS Positioning Tutorial:

Ας ξεκινήσουμε...

Ιδιότητες θέσης και βοηθού CSS

Υπάρχουν λοιπόν 5 βασικές τιμές της ιδιότητας θέσης :

position: static | relative | absolute | fixed | sticky

και πρόσθετες ιδιότητες για τον καθορισμό των συντεταγμένων ενός στοιχείου (τις αποκαλώ «βοηθητικές ιδιότητες» ):

top | right | bottom | left Και το z-index

Σημαντική σημείωση : Οι ιδιότητες βοηθού δεν λειτουργούν χωρίς δηλωμένη θέση ή με θέση: στατική

Τι είναι αυτός ο δείκτης z;

Έχουμε ύψος και πλάτος (x, y) ως 2 διαστάσεις. Το Z είναι η 3η διάσταση. Ένα στοιχείο στην ιστοσελίδα έρχεται μπροστά από άλλα στοιχεία καθώς z-indexαυξάνεται η αξία του.

Το ευρετήριο Z δεν λειτουργεί με position: staticή χωρίς δηλωμένη θέση.

Μπορείτε να παρακολουθήσετε το βίντεο στο κανάλι μου για να δείτε πώς να χρησιμοποιήσετε το ευρετήριο z με περισσότερες λεπτομέρειες:

Τώρα ας προχωρήσουμε με τις τιμές ιδιοτήτων θέσης ...

1. Στατικός

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

Κατ 'αρχάς, ορίζουμε τη δομή HTML:

Στη συνέχεια, δημιουργούμε 2 κουτιά και καθορίζουμε τα πλάτη, τα ύψη και τις θέσεις τους:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

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

2. Σχετικός

position: relative: Η νέα θέση ενός στοιχείου σε σχέση με την κανονική του θέση.

Ξεκινώντας με position: relativeκαι για όλες τις μη στατικές θέσειςτιμές, μπορούμε να αλλάξουμε την προεπιλεγμένη θέση ενός στοιχείου χρησιμοποιώντας τα βοηθητικά ακίνητα που ανέφερα παραπάνω.

Ας μετακινήσουμε το πορτοκαλί κουτί δίπλα στο μπλε.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
ΣΗΜΕΙΩΣΗ: Η χρήση θέσης: σχετική για ένα στοιχείο, δεν επηρεάζει τις θέσεις άλλων στοιχείων.

3. Απόλυτο

Στο position: relative, το στοιχείο τοποθετείται σε σχέση με το ίδιο. Ωστόσο, ένα απόλυτο lyΤο τοποθετημένο στοιχείο είναι σχετικό με το γονικό του .

Ένα στοιχείο με position: absoluteαφαιρείται από την κανονική ροή εγγράφου. Τοποθετείται αυτόματα στο σημείο εκκίνησης ( πάνω αριστερή γωνία) του γονικού στοιχείου. Εάν δεν έχει γονικά στοιχεία, τότε το αρχικό έγγραφο θα είναι το γονικό του.

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

Ας προσθέσουμε ένα κοντέινερ ως γονικό στοιχείο:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

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

Ας μετακινήσουμε το πορτοκαλί κουτί 5 pixel:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

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

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Διορθώθηκε

Όπως position: absolute, τα σταθερά τοποθετημένα στοιχεία αφαιρούνται επίσης από την κανονική ροή εγγράφων. Οι διαφορές είναι:

  • Είναι μόνο σχετικά με το έγγραφο, όχι με άλλους γονείς.
  • Δεν επηρεάζονται από την κύλιση .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

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

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

Αν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, μη διστάσετε να με ακολουθήσετε στο Youtube !

Ευχαριστούμε που το διαβάσατε!