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

Ιδιότητες της CSS για την θέση των στοιχείων

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού της θέσης ενός στοιχείου μέσα στην σελίδα και σε σχέση με τα γειτονικά του στοιχεία:
Ιδιότητα Τιμές Περιγραφή
bottom auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του κατώτερου σημείου του στοιχείου και της κάτω πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
clear left
right
both
none
Ορίζει την πλευρά ενός στοιχείου στην οποία δεν επιτρέπεται να εμφανίζονται άλλα στοιχεία.

left = στην αριστερή πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
right = στην δεξιά πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
both = στην δεξιά και στην αριστερή πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
none = τα γειτονικά στοιχεία εμφανίζονται κανονικα
Δοκίμασε το
clip rect(σημειοx1, σημειοy1, σημειοx2, σημειοy2)
auto
Ορίζει ένα σχήμα το οποίο ορίζει την επιφάνεια του στοιχείου που θα εμφανίζεται. Η τιμή που πέρνει η ιδιότητα clip είναι η rect(σημειοx1, σημειοy1, σημειοx2, σημειοy2) η οποία ορίζει το ορθογώνιο σχήμα.
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
display none
block
inline
list-item
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Ορίζει την εμφάνιση του στοιχείου

none: το στοιχείο δεν εμφανίζεται καθόλου
block: το στοιχείο εμφανίζεται σαν μπλοκ αφήνοντας μια γραμμή κενή πριν και μετά το στοιχείο αυτό
inline: το στοιχείο εμφανίζεται κανονικά (default) χωρίς την κενή γραμμή πριν και μετά το στοιχείο αυτό
list-item: το στοιχείο εμφανίζεται σαν επιλογή λίστας
table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) αφήνοντας μια γραμμή κενή πριν και μετά το στοιχείο αυτό
inline-table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) χωρίς την κενή γραμμή πριν και μετά το στοιχείο αυτό
table-row-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <tbody>)
table-header-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <thead>)
table-footer-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <tfoot>)
table-row: το στοιχείο εμφανίζεται σαν γραμμή πίνακα (όπως <tr>)
table-column-group: το στοιχείο εμφανίζεται σαν ομάδα στυλών πίνακα (όπως <colgroup>)
table-column: το στοιχείο εμφανίζεται σαν μια στήλη κελιών πίνακα (όπως <col>)
table-cell: το στοιχείο εμφανίζεται σαν ένα κελί πίνακα (όπως <td> και <th>)
table-caption: το στοιχείο εμφανίζεται σαν τίτλος πίνακα (όπως <caption>)
Δοκίμασε το
float left
right
none
Ορίζει την θέση ενός στοχείου σε σχέση με το γειτονικό του στοιχείο
Δοκίμασε το
left auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του αριστερότερου σημείου του στοιχείου και της αριστερής πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
overflow visible
hidden
scroll
auto
Ορίζει τον τρόπο που θα διαχειριστεί ο browser το περιεχόμενο, όταν αυτό υπερβαίνει το όριο της περιοχής στην οποία βρίσκεται (είτε είναι σε κελί ενός πίνακα, είτε είναι σε μια περιοχή κειμένου, κτλ).
visible = το μέρος του περιεχομένου που υπερβαίνει το όριο της περιοχής, θα εμφανίζεται.
hidden = το μέρος του περιεχομένου που υπερβαίνει το όριο της περιοχής, δεν θα εμφανίζεται.
scroll = όταν το περιεχόμενο υπερβαίνει την περιοχή στην οποία βρίσκεται, τότε θα εμφανίζονται οι μπάρες κύλισης
Δοκίμασε το
position static
relative
absolute
fixed
Ορίζει τον τρόπο που θα λειτουργήσουν οι ιδιότητες left, top, right, bottom

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

relative = αν προσθέσουμε στο στυλ το left: 40px, ο browser θα αφήσει κενό 40 pixels αριστερά του στοιχείου. Αν προσθέσουμε στο στυλ το top: 94px, ο browser θα αφήσει κενό 94 pixels από την πάνω πλευρά του στοιχείου. Αν προσθέσουμε στο στυλ το right: 34px, ο browser θα αφήσει κενό 34 pixels δεξιά του στοιχείου. Αν προσθέσουμε στο στυλ το bottom: 7px, ο browser θα αφήσει κενό 7 pixels από την κάτω του στοιχείου.
Δοκίμασε το

absolute = ορίζει την ακριβή θέση που θα εμφανιστεί το στοιχείο ανεξάρτητα την κανονική θέση του μέσα στην σελίδα. Η θέση καθορίζεται από δύο τιμές: την οριζόντια τιμή (left) και την κάθετη τιμή (top). Αν δηλαδή προσθέσουμε στο στυλ το left: 40px και το top:100px, τότε ο browser θα τοποθετήσει το στοιχείο στο σημείο με συντεταγμένες 40,100 της οθόνης του browser.
Δοκίμασε το

fixed = λειτουργεί όπως ακριβώς η τιμή absolute, με την διαφορά ότι σε περίπτωση που το περιεχόμενο της σελίδας σκρολάρει, το στοιχείο παραμένει σταθερό
Δοκίμασε το
right auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του δεξιότερου σημείου του στοιχείου και της δεξιάς πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
top auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του πιο πάνω σημείου του στοιχείου και της πάνω πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την κάθετη στοίχιση των γειτονικών στοιχείων
baseline: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
sub
: τα γειτονικά στοιχεία τοποθετούνται σαν μαθηματική βάση του στοιχείου
super: τα γειτονικά στοιχεία τοποθετούνται σαν μαθηματικός εκθέτης του στοιχείου
top: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την πάνω πλευρά του στοιχείου
text-top: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την πάνω πλευρά του στοιχείου
middle: τα γειτονικά στοιχεία τοποθετούνται στην μέση της κάθετης πλευράς του στοιχείου
bottom: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
text-bottom: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
αριθμός σε pixels: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε pixels) κάτω από το στοιχείο
αριθμός σε cm: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε cm) κάτω από το στοιχείο
αριθμός σε %: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε %) κάτω από το στοιχείο
Δοκίμασε το
visibility visible
hidden
collapse
Ορίζει αν θα εμφανίζεται ή όχι ένα στοιχείο, χωρίς να αλλάζει η διάταξη των στοιχείων μέσα στην οθόνη. Η τιμή collapse όταν χρησιμοποιείται σε πίνακα, αφαιρεί το περιεχόμενο των κελιών ή των γραμμών
Δοκίμασε το

Παραδείγματα

Στοίχηση εικόνας και κειμένου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε την στοίχηση μιας εικόνας σε σχέση με το γειτονικό του κείμενο float)

Στοίχηση του πρώτου γράμματος της παραγράφου στα αριστερά
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε την στοίχηση του πρώτου γράμματος μιας παραγράφου σε σχέση με την υπόλοιπη παράγραφο (ιδιότητα float)

Ορισμός σχήματος ενός στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε ένα σχήμα το οποίο θα ορίζει την επιφάνεια του στοιχείου που θα εμφανίζεται (ιδιότητα clip)

Εμφάνιση παραγράφων σαν inline
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να εμφανίσουμε τρεις παραγράφους στην ίδια γραμμή (ιδιότητα display)

Εμφάνιση λέξεων σαν block
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να εμφανίσουμε δύο λέξεις σαν διαφορετικό μπλοκ (ιδιότητα display)

Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.