Μπορείτε να καθορίσετε τον τύπο θέσης για μια περιοχή ή ένα στοιχείο. Για να γίνει αυτό χρησιμοποιείται η ιδιότητα position. Αυτή η ιδιότητα υποδηλώνει πώς ένα στοιχείο θα πρέπει να τοποθετηθεί. Συνολικά υπάρχουν τέσσερις διαφορετικές επιλογές θέσης.
• static – δεν γίνεται καμία ειδική τοποθέτηση ενώ η κανονική ροή κειμένου συνεχίζεται.
• relative – γίνεται μια σχετική τοποθέτηση που είναι βασισμένη στην κανονική ή αρχική θέση του στοιχείου.
• absolute – γίνεται μια απόλυτη τοποθέτηση μέσω των ιδιοτήτων top, bottom, left και right. Τα απόλυτα τοποθετημένα στοιχεία βρίσκονται εκτός της κανονικής ροής του κειμένου. Η απόλυτη θέση υπολογίζεται σε σχέση με τις ακμές του γονικού στοιχείου (αλλά μόνο αν αυτό δεν έχει την ιδιότητα position: static).
• fixed – το στοιχείο τοποθετείται απόλυτα. Κατά την κύλιση η θέση του στοιχείου παραμένει σταθερή.
Οι δύο πρώτες επιλογές επιτρέπουν μια μεταβλητή τοποθέτηση. Εδώ τα στοιχεία τοποθετούνται μεταξύ τους. Τα δύο παρακάτω παραδείγματα δείχνουν πώς μπορεί να είναι αυτή η τοποθέτηση:
• Το Στοιχείο 2 τοποθετείται 30 pixel μακριά από το Στοιχείο 1.
• Το Στοιχείο 2 τοποθετείται πίσω από το Στοιχείο 1.
Διαφορετικά συμπεριφέρονται τα fixed και static. Με αυτά μπορούν να τοποθετηθούν τα στοιχεία σε πολύ συγκεκριμένες θέσεις. Οι οδηγίες τοποθέτησης αφορούν το γονικό στοιχείο ή το παράθυρο του προγράμματος περιήγησης. Ένα παράδειγμα:
• Το Στοιχείο 1 τοποθετείται ακριβώς 30 pixel από τη δεξιά και 20 pixel από την επάνω άκρη του παράθυρου του προγράμματος περιήγησης.
Στη συνέχεια παρουσιάζονται λεπτομερώς οι διαφορετικές επιλογές τοποθέτησης. Πριν όμως αυτό, ένα σημείωμα: Συνδέοντας το να τοποθετούμε στοιχεία με το λεγόμενο float, παίζει σημαντικό ρόλο. Σε ένα μελλοντικό εκπαιδευτικό video θα εξηγηθεί λεπτομερώς. Βασικά, το float ασχολείται με το πώς τα στοιχεία της ιστοσελίδας ρέουν στο έγγραφο. Με την τοποθέτηση των στοιχείων μπορείτε να καθορίσετε συγκεκριμένα την ροή των στοιχείων.
Η σχετική τοποθέτηση
Με τη χρήση της σχετικής τοποθέτησης μέσω position: relative συμβαίνουν δύο πράγματα:
• Η κουτίδα μετακινείται από τη φυσική της ροή.
• Ο αρχικός χώρος του στοιχείου παραμένει επιφυλαγμένος.
Με την επίδειξη του αρχικού χώρου, τα υπόλοιπα στοιχεία συμπεριφέρονται σαν να το στοιχείο υπάρχει ακόμα στη θέση του.
Ένα παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Ορίστηκαν τρεις κουτίδες εδώ.
Οι δύο κουτίδες 2 και 3 δεν έχουν καμία οδηγία τοποθέτησης. Επομένως ακολουθούν την κανονική ροή του κειμένου. Αντίθετα, η κουτίδα 1 τοποθετήθηκε σχετικά. Έτσι οι κουτίδες 2 και 3 δεν επηρεάζονται καθόλου από την κουτίδα 1. Ο χώρος της κουτίδας 1 δεν καταλαμβάνεται από αυτές τις κουτίδες. Με τις οδηγίες top, bottom, left και right γίνεται η τοποθέτηση των κουτιών. Κατά τη σχετική τοποθέτηση λαμβάνεται υπόψη η αρχική θέση της κουτίδας στη ροή του εγγράφου (Flow).
• top: 25px – Η κουτίδα μετακινείται 25 pixel προς τα κάτω. Στην κανονική θέση της κουτίδας προστίθενται δηλαδή 25 pixel επάνω.
• right: 25px – Η κουτίδα μετακινείται 25 pixel προς τα αριστερά. Στην κανονική θέση της κουτίδας προστίθενται δηλαδή 25 pixel δεξιά.
Οι τιμές των pixel είναι σε σχέση με την αρχική θέση. Οι οδηγίες καθορίζουν όπου θα εισαχθεί η τιμή, συνεπώς επάνω και δεξιά. Αυτή η πτυχή είναι κρίσιμη. Οι οδηγίες δεν καθορίζουν τη μετακίνηση της κουτίδας.
Η απόλυτη τοποθέτηση
Συνεχίζουμε με την απόλυτη τοποθέτηση. Αυτή η μέθοδος τοποθέτησης αφαιρεί το στοιχείο πλήρως από τη ροή. Τα υπόλοιπα στοιχεία στη σελίδα συμπεριφέρονται σαν να το στοιχείο δεν υπάρχει καθόλου.
Ένα παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Κι εδώ ορίστηκαν τρεις κουτίδες. Η κουτίδα 1 τοποθετήθηκε απόλυτα.
Αντίθετα με τη σχετική τοποθέτηση, για το στοιχείο 1 δεν είναι κρατημένος χώρος. Οι κουτίδες 2 και 3 μετακινούνται πάνω.
Οι οδηγίες τοποθέτησης top, right, bottom ή left τώρα δεν είναι πλέον βασισμένες στην αρχική θέση της κουτίδας στη ροή. Αντίθετα, οι οδηγίες αυτές αναφέρονται στο επόμενο γύρω στοιχείο που τοποθετήθηκε με relative, absolute ή fixed. Αν δεν υπάρχει γύρω γύρω στοχείο, η τοποθέτηση γίνεται σχ
Μια θέση με fixed
Με την position: fixed μπορούμε να σταθεροποιήσουμε τα στοιχεία. Ένα παράδειγμα είναι το εξής:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Για λίγο διάστημα το πιο πρόσφατο μάθημα ή βίντεο εκπαίδευσης στην προβολή online ή ο περιεχόμενο από την κατηγορία λήψης είναι διαθέσιμο χωρίς πόντους. Μάθετε περισσότερα εδώ ...</p>
</body>
</html>Η σταθεροποιημένη θήκη δεν κυλάει μαζί, αλλά παραμένει πάντοτε στην του ορισμένη θέση.
Για τις σταθεροποιημένες θήκες, το περιβάλλοντα στοιχείο είναι πάντα το παράθυρο του προγράμματος περιήγησης.
Παρακαλώ να σημειώσετε ότι υπάρχουν σημαντικά προβλήματα σχετικά με τη σταθεροποίηση στα παλαιότερα προγράμματα περιήγησης. Για παράδειγμα, ο IE6 δεν κάνει αυτό που θα έπρεπε. Όποιος θέλει / πρέπει να βελτιστοποιήσει τις ιστοσελίδες του και για αυτόν τον προγραμματιστή περιηγητή τώρα έχει δύο επιλογές:
• Αποφεύγετε τις σταθεροποιημένες θήκες.
• Χρησιμοποιείτε κόλπα για τον IE.
Αν θέλετε να χρησιμοποιήσετε ένα κόλπο, σας συνιστώ να επισκεφτείτε τη σελίδα http://thestyleworks.de/tut-art/iewinfixed.shtml. Εκεί δείχνεται με ένα μικρό JavaScript πως μπορείτε να επιτύχετε τη σταθεροποίηση θηκών και για αυτό το πρόγραμμα περιήγησης.
