Το CSS σάς βοηθά να τοποθετήσετε το στοιχείο HTML σας. Μπορείτε να βάλετε οποιοδήποτε στοιχείο HTML σε όποια τοποθεσία θέλετε.
Μπορείτε να καθορίσετε εάν θέλετε το στοιχείο να τοποθετείται σε σχέση με τη φυσική του θέση στη σελίδα ή απόλυτο με βάση το γονικό του στοιχείο.
Η τοποθέτηση μέσω CSS είναι ένα σημαντικό μέρος για την δημιουργία διατάξεων των αντικειμένων σε μια ιστοσελίδα. Γι’ αυτό η γνώση της CSS εξακολουθεί να είναι μια βασική και απαραίτητη γνώση για τους web designers
Όταν χρησιμοποιούμε τη θέση θέσης CSS, το πρώτο πράγμα που πρέπει να κάνουμε είναι να ορίσουμε την ιδιότητα CSS για τη θέση για να πούμε στον φυλλομετρητή / browser μας εάν πρόκειται να χρησιμοποιήσουμε απόλυτη ή σχετική τοποθέτηση για ένα δεδομένο html στοιχείο.
Πρέπει επίσης να κατανοήσετε τη διαφορά μεταξύ αυτών των δύο ιδιοτήτων τοποθέτησης.
H απόλυτη και η σχετική τοποθέτηση είναι οι δύο ιδιότητες θέσης CSS που χρησιμοποιούνται πιο συχνά στο σχεδιασμό ιστοσελίδων
Τώρα, θα δούμε όλες τις ιδιότητες που σχετίζονται με τη θέση CSS με παραδείγματα.
Σχετική Τοποθέτηση
H σχετική τοποθέτηση αλλάζει τη θέση του στοιχείου HTML σε σχέση με το σημείο που εμφανίζεται συνήθως. Έτσι, το “left:20” προσθέτει 20 pixel στην αριστερά θέση του στοιχείου.
Μπορείτε να χρησιμοποιήσετε δύο τιμές επάνω και αριστερά μαζί με την ιδιότητα θέσης για να μετακινήσετε ένα στοιχείο HTML οπουδήποτε στο έγγραφο HTML.
- Μετακίνηση αριστερά – Χρησιμοποιήστε μια αρνητική τιμή για τα αριστερά.
- Μετακίνηση δεξιά – Χρησιμοποιήστε μια θετική τιμή για τα αριστερά.
- Μετακίνηση προς τα πάνω – Χρησιμοποιήστε μια αρνητική τιμή για την κορυφή.
- Μετακίνηση προς τα κάτω – Χρησιμοποιήστε μια θετική τιμή για την κορυφή.
ΣΗΜΕΙΩΣΗ: Μπορείτε να χρησιμοποιήσετε τιμές κάτω ή δεξιά με τον ίδιο τρόπο όπως πάνω και αριστερά.
Εδώ είναι το παράδειγμα :
Θα παράγει το ακόλουθο αποτέλεσμα :
Αυτό το div έχει σχετική τοποθέτηση.
Απόλυτη Τοποθέτηση
Ένα στοιχείο με απόλυτη θέση, τοποθετείται στις καθορισμένες συντεταγμένες σε σχέση με την επάνω αριστερή γωνία της οθόνης σας.
Μπορείτε να χρησιμοποιήσετε δύο τιμές επάνω και αριστερά μαζί με την ιδιότητα θέσης για να μετακινήσετε ένα στοιχείο HTML οπουδήποτε στο έγγραφο HTML.
- Μετακίνηση αριστερά – Χρησιμοποιήστε μια αρνητική τιμή για τα αριστερά.
- Μετακίνηση δεξιά – Χρησιμοποιήστε μια θετική τιμή για τα αριστερά.
- Μετακίνηση προς τα πάνω – Χρησιμοποιήστε μια αρνητική τιμή για την κορυφή.
- Μετακίνηση προς τα κάτω – Χρησιμοποιήστε μια θετική τιμή για την κορυφή.
ΣΗΜΕΙΩΣΗ: Μπορείτε να χρησιμοποιήσετε τιμές κάτω ή δεξιά με τον ίδιο τρόπο όπως πάνω και αριστερά.
Εδώ είναι ένα παράδειγμα :
Θα παράγει το ακόλουθο αποτέλεσμα :
Αυτό το div έχει απόλυτη τοποθέτηση.
Σταθερή Τοποθέτηση
H σταθερή τοποθέτηση σας επιτρέπει να καθορίσετε τη θέση ενός στοιχείου σε ένα συγκεκριμένο σημείο της σελίδας, ανεξάρτητα από την κύλιση. Οι καθορισμένες συντεταγμένες θα είναι σχετικές με το παράθυρο του προγράμματος περιήγησης.
Μπορείτε να χρησιμοποιήσετε δύο τιμές επάνω και αριστερά μαζί με την ιδιότητα θέσης για να μετακινήσετε ένα στοιχείο HTML οπουδήποτε στο έγγραφο HTML.
- Μετακίνηση αριστερά – Χρησιμοποιήστε μια αρνητική τιμή για τα αριστερά.
- Μετακίνηση δεξιά – Χρησιμοποιήστε μια θετική τιμή για τα αριστερά.
- Μετακίνηση προς τα πάνω – Χρησιμοποιήστε μια αρνητική τιμή για την κορυφή.
- Μετακίνηση προς τα κάτω – Χρησιμοποιήστε μια θετική τιμή για την κορυφή.
ΣΗΜΕΙΩΣΗ Μπορείτε να χρησιμοποιήσετε τιμές κάτω ή δεξιά με τον ίδιο τρόπο όπως πάνω και αριστερά.
Εδώ είναι ένα παράδειγμα :
Θα παράγει το ακόλουθο αποτέλεσμα :
Αυτό το div έχει σταθερή τοποθέτηση.
To άρθρο αυτό αποτελεί μέρος μιας σειράς άρθρων για την γλώσσα css και μπορείτε να διαβάσετε όλα τα σχετικά μας άρθρα κάνοντας κλικ εδώ
Αποτελεί επίσης καρπό εργασίας που έγινε εντός του προγράμματος web designer / developer του ΚΕΔΙΒΙΜ του Πανεπιστημίου Αιγαίου από το Aegean Digital .
Το επαγγελματικό αυτό σεμινάριο διάρκειας 12 μηνών στηρίζει το Εργαστήριο ΤΠΕ Ήρων μέσω του επιχειρησιακού του βραχίονα της εταιρείας κατασκευής ιστοσελίδων DreamWeaver.Gr παρέχοντας δωρεάν πολύτιμα εργαλεία για την ανάπτυξη και κατασκευή μιας ιστοσελίδας όπως το web hosting , την κατοχύρωση του domain name και πολλούς άλλους χρήσιμους πόρους.
Μετάφραση: Νίκος Τσοχαταρίδης
Πηγή: tutorialspoint.com
