Κεφάλαιο 17 : CSS Τοποθέτηση στοιχείων

Position

Η ιδιότητα position (όπως πολύ πιθανόν έχετε ήδη προβλέψει) αλλάζει τον τρόπο με τον οποίο τα στοιχεία τοποθετούνται μέσα σε μια ιστοσελίδα.

Η ιδιότητα αυτή ορίζεται ως

position : value;

και οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι ακόλουθες

static
relative
absolute
fixed

Και σε τι διαφέρουν αυτές οι τιμές;

static

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

position : static;

relative

Η σχετική τοποθέτηση ενός στοιχείου, τοποθετεί το στοιχείο στην θέση του όπως αυτό θα έπρεπε να είναι κανονικά στην φυσική ροή των στοιχείων μέσα στη σελίδα, όπως συμβαίνει και με το static, με τη διαφορά, ότι εδώ μπορείτε να χρησιμοποιήσετε και τις ιδιότητες left, right, top και bottom για να μετακινήσετε το στοιχείο αντίστοιχα προς κάποια κατεύθυνση.

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

Για να δηλώσετε την θέση ενός στοιχείου ως σχετική τότε θα πρέπει να την δηλώσετε όπως στον κώδικα που ακολουθεί:

position : relative;

absolute

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

Η δήλωση ενός στοιχείου με απόλυτη τοποθέτηση γίνετε με τον ακόλουθο κώδικα:

position : absolute;

fixed

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

Επιπλέον, ένα στοιχείο που έχει δηλωθεί ως fixed δεν θα κυλάει μαζί με το περιεχόμενο σας, αντίθετα θα παραμένει σταθερό στην ίδια θέση στην οθόνη του περιηγητή σας.

Θα πρέπει να σημειωθεί πως αυτή τη στιγμή ο IE6 (Internet Explorer 6) δεν υποστηρίζει αυτή την τιμή για να ορίσετε τη θέση ενός στοιχείου. Αυτό έχει ως αποτέλεσμα τα στοιχεία που έχουν δηλωθεί ως fixed στον Internet Explorer 6 ή και σε παλαιότερους δεν θα εμφανίζονται σωστά.

Για όσα στοιχεία έχουν δηλωθεί ως relative, absolute ή fixed οι ακόλουθες ιδιότητες μπορούν να χρησιμοποιηθούν για να μεταβάλλεται την θέση τους:

top
left
right
bottom

Προηγούμενο : CSS Ταξινόμηση
Επόμενο : CSS Ψευδό-στοιχεία