Πώς να κατανοήσετε την Απόλυτη Θέση CSS μια για πάντα

Σταματήστε να χάνετε τα στοιχεία σας στην οθόνη καταλαβαίνοντας πώς ένα αντικείμενο υπολογίζει πού πρέπει να κάθεται

Η τοποθέτηση ενός στοιχείου είναι απολύτως περισσότερο για τη θέση του στοιχείου από το δικό του. Για να είναι σε θέση να τοποθετηθεί, πρέπει να γνωρίζει σε ποιον γονέα πρόκειται να τοποθετηθεί.

Ο παρακάτω κώδικας δείχνει τέσσερα ένθετα div. .box-1στο .box-3κέντρο display: flexκαι margin: autoμόνο. .box-4δεν έχει marginοριστεί και βρίσκεται στην προεπιλεγμένη θέση του στη ροή εγγράφων.

Η positionιδιότητα είναι μη ρυθμισμένη σε όλα τα στοιχεία.

body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

Για να μπορεί να τοποθετηθεί, ένα στοιχείο πρέπει να γνωρίζει δύο πράγματα:

  • συντεταγμένες για του xκαι yσετ θέση είτε top, right, bottom,left
  • σε ποιον γονέα πρόκειται να τοποθετηθεί σε σχέση με

Κατά την εφαρμογή position: absoluteστο .box-4στοιχείο αφαιρείται από το normal document flow. Δεδομένου ότι οι συντεταγμένες του δεν έχουν οριστεί, παραμένει απλώς στην προεπιλεγμένη θέση που είναι το γονικό της div στην επάνω αριστερή γωνία.

Με τον καθορισμό top: 0και left: 0το στοιχείο τότε πρέπει να γνωρίζει ποιος γονέας θα θεωρήσει ως σημείο αναφοράς. Για να γίνει αναφορά, το στοιχείο πρέπει να τοποθετηθεί στην οθόνη με position: relative. .box-4στη συνέχεια αρχίζει να ρωτάει τους γονείς της divs εάν είναι τοποθετημένοι. Αρχικά, ρωτά .box-3και παίρνει No, I am not positioned.ως απάντηση. Το ίδιο ισχύει .box-2και μετά .box-1, αφού όλα έχουν position: unset.

Καθώς .box-4δεν μπόρεσε να βρει μια θέση γονέα, τοποθετείται σε σχέση με το body. Αυτό το στοιχείο τοποθετείται πάντα στην οθόνη:

Αν οριστεί position: relativeσε .box-1, όταν .box-4ζητά: Are you positioned?παίρνει Yes I am.ως απάντηση. Και μετά .box-4θα τοποθετηθεί σε σχέση με .box-1:

Το ίδιο ισχύει .box-2και για .box-3.

Το απόλυτα τοποθετημένο στοιχείο θα τοποθετηθεί σε σχέση με τον πλησιέστερο προγονικό.

Μόλις βρει έναν προγονικό, η θέση των παραπάνω στοιχείων δεν είναι πλέον σχετική. Οι παρακάτω εικόνες δείχνουν τη διάταξη σχετικά με τη ρύθμιση position: relativeγια .box-2 και .box-3, αντίστοιχα:

Μπορείτε επίσης να βρείτε μια εξήγηση βίντεο στο Code Sketch Channel;

Ευχαριστώ για την ανάγνωση! ✌️

Αρχικά δημοσιεύθηκε στο marina-ferreira.github.io.