4.3 Η ιδιότητα position στην γλώσσα CSS

Η ιδιότητα position στην CSS χρησιμοποιείται για να καθορίσει τον τρόπο τοποθέτησης ενός στοιχείου στη σελίδα. Η position μπορεί να πάρει μια από τις παρακάτω τιμές:

1. static: Είναι η προεπιλεγμένη τιμή. Τα στοιχεία με position: static τοποθετούνται στην κανονική τους θέση στη ροή του εγγράφου και αγνοούνται οι ιδιότητες top, bottom, left και right.
2. relative: Τοποθετεί το στοιχείο σε σχέση με την κανονική του θέση. Μπορείτε να χρησιμοποιήσετε τις ιδιότητες top, bottom, left και right για να ορίσετε τη θέση του στοιχείου από την αρχική του θέση.
3. absolute: Αφαιρεί το στοιχείο από την κανονική ροή του εγγράφου και τοποθετείται απόλυτα σε σχέση με το πρώτο πατρικό στοιχείο που έχει την position άλλη από static. Μπορείτε να χρησιμοποιήσετε τις ιδιότητες top, bottom, left και right για να ορίσετε τη θέση του στοιχείου σε σχέση με αυτό το πατρικό στοιχείο.
4. fixed: Αντίστοιχο με την absolute, αλλά η θέση του στοιχείου είναι σταθερή σε σχέση με το παράθυρο προβολής του προγράμματος περιήγησης. Δεν μετακινείται καθώς κυλάτε τη σελίδα.

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

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

Τα στατικά στοιχεία δεν επηρεάζονται από τις ιδιότητες top, bottom, left και right.

Ένα στοιχείο με την ιδιότητα position: static; τοποθετείται με τον συνηθισμένο τρόπο ροής της σελίδας και δεν έχει καμία ειδική τοποθέτηση.

Αυτό σημαίνει ότι το στοιχείο θα τοποθετηθεί στην κανονική του θέση στη ροή του εγγράφου και δεν θα μετακινηθεί από την προκαθορισμένη τοποθεσία του ακόμη και αν ορίσετε τιμές για τις ιδιότητες top, bottom, left και right.

Ένα παράδειγμα για ένα στοιχείο με position: static;:

HTML:

<div class="container">
  <!-- Αυτό είναι ένα στοιχείο με στατική θέση -->
  <p>This is a static positioned element.</p>
</div>

CSS:

.container {
  /* Ορίζει το πλάτος του στοιχείου σε 200px */
  width: 200px;

  /* Ορίζει το ύψος του στοιχείου σε 200px */
  height: 200px;

  /* Ορίζει το χρώμα του φόντου σε ανοιχτό γκρι */
  background-color: lightgray;

  /* Προσθέτει περιθώριο 20px γύρω από το περιεχόμενο */
  padding: 20px;
}

p {
  /* Ορίζει τη θέση του στοιχείου ως στατική (κανονική ροή του εγγράφου) */
  position: static;

  /* Ορίζει την απόσταση του στοιχείου από το επάνω μέρος του κειμένου ως 50px */
  top: 50px;

  /* Ορίζει την απόσταση του στοιχείου από το αριστερό μέρος του κειμένου ως 50px */
  left: 50px;
}

Σε αυτό το παράδειγμα, ο εσωτερικός παράγοντας <p> έχει position: static;. Αυτό σημαίνει ότι το <p> θα τοποθετηθεί στην κανονική του θέση στη ροή του εγγράφου, χωρίς να επηρεαστεί από τις ιδιότητες top, bottom, left και right.

[adinserter block=”2″]

Παρόλο που έχουμε ορίσει τιμές για τις ιδιότητες top και left, η θέση του <p> δεν θα μετακινηθεί από την προκαθορισμένη του θέση εντός του .container. Θα παραμείνει στην κανονική του θέση στο ροή του εγγράφου, εντός του <div> με την κλάση .container.

Αυτό είναι ένα παράδειγμα για τη στατική τοποθέτηση ενός στοιχείου, όπου οι ιδιότητες top, bottom, left και right δεν έχουν καμία επίδραση.

Ένα στοιχείο με position: relative; τοποθετείται σχετικά με την κανονική του θέση.

Όταν ορίζονται οι ιδιότητες top, right, bottom και left ενός στοιχείου με σχετική θέση, το στοιχείο μετακινείται μακριά από την κανονική του θέση. Το άλλο περιεχόμενο δεν προσαρμόζεται για να καλύψει το κενό που αφήνεται από το στοιχείο.

Παράδειγμα:

HTML:

<div class="container">
  <!-- Αυτό είναι ένα στοιχείο με σχετική θέση -->
  <p>This is a relatively-positioned element.</p>
</div>

CSS:

.container {
  /* Ορίζει το πλάτος του στοιχείου σε 200px */
  width: 200px;

  /* Ορίζει το ύψος του στοιχείου σε 200px */
  height: 200px;

  /* Ορίζει το χρώμα του φόντου σε ανοιχτό γκρι */
  background-color: lightgray;

  /* Προσθέτει περιθώριο 20px σε όλες τις πλευρές του στοιχείου */
  padding: 20px;
}

p {
  /* Ορίζει τη θέση του στοιχείου ως σχετική */
  position: relative;

  /* Μετατοπίζει το στοιχείο 20px προς τα κάτω */
  top: 20px;

  /* Μετατοπίζει το στοιχείο 50px προς τα αριστερά */
  left: 50px;
}

Σε αυτό το παράδειγμα, έχουμε ένα εσωτερικό στοιχείο <p> με position: relative;. Οι ιδιότητες top: 20px; και left: 50px; καθορίζουν τη θέση του <p> σχετικά με την κανονική του θέση.

Αυτό σημαίνει ότι το <p> θα μετακινηθεί 20 pixels προς τα κάτω και 50 pixels προς τα δεξιά από την κανονική του θέση εντός του .container. Το άλλο περιεχόμενο δεν προσαρμόζεται για να καλύψει το κενό που αφήνεται από το <p>.

Ένα στοιχείο με position: fixed; τοποθετείται σχετικά με το παράθυρο προβολής (viewport) και παραμένει πάντα στην ίδια θέση, ακόμα κι αν γίνεται κύλιση της σελίδας. Οι ιδιότητες top, right, bottom και left χρησιμοποιούνται για να ορίσουν τη θέση του στοιχείου.

Ένα στοιχείο με position: fixed; δεν αφήνει κενό στη σελίδα όπου θα βρισκόταν κανονικά.

Παρακάτω παρατίθεται το CSS που χρησιμοποιείται για ένα στοιχείο fixed στην κάτω δεξιά γωνία της σελίδας:

.fixed-element {
  /* Ορίζει τη θέση του στοιχείου ως σταθερή */
  position: fixed;

  /* Ορίζει την απόσταση από το κάτω μέρος */
  bottom: 20px;

  /* Ορίζει την απόσταση από το δεξί μέρος */
  right: 20px;
}

Σε αυτό το παράδειγμα, το στοιχείο με την κλάση .fixed-element τοποθετείται στην κάτω δεξιά γωνία της σελίδας. Η ιδιότητα position: fixed; το καθιστά σταθερό και οι ιδιότητες bottom: 20px; και right: 20px; ορίζουν τη θέση του στοιχείου από την κάτω δεξιά γωνία του παραθύρου προβολής.

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

[adinserter block=”3″]

Ένα στοιχείο με position: absolute; τοποθετείται σχετικά με τον πλησιέστερο θεμελιωμένο πρόγονο (positioned ancestor) του (αντί να τοποθετείται σχετικά με το παράθυρο προβολής, όπως το fixed).

Ωστόσο, αν ένα στοιχείο με απόλυτη θέση (absolute position) δεν έχει κανέναν θεμελιωμένο πρόγονο, τότε χρησιμοποιεί το σώμα του εγγράφου (document body) και μετακινείται μαζί με την κύλιση της σελίδας.

Σημείωση: Τα στοιχεία με απόλυτη θέση (absolute position) αφαιρούνται από την κανονική ροή του εγγράφου και μπορούν να επικαλύπτουν άλλα στοιχεία.

Εδώ υπάρχει ένα απλό παράδειγμα:

HTML:

<div class="container">
  <!-- Ένα container που περιέχει άλλα στοιχεία -->

  <div class="box">
    <!-- Ένα box που περιέχει ένα παράγραφο -->
    <p>This is an absolutely positioned element.</p>
  </div>
</div>

CSS:

.container {
  /* Ορίζει τη θέση του στοιχείου ως σχετική στο πλαίσιο του γονέα */
  position: relative;

  /* Ορίζει το πλάτος του στοιχείου σε 300px */
  width: 300px;

  /* Ορίζει το ύψος του στοιχείου σε 200px */
  height: 200px;

  /* Ορίζει το χρώμα του φόντου σε ανοιχτό γκρι */
  background-color: lightgray;

  /* Προσθέτει περιθώριο 20px στο εσωτερικό του πλαισίου */
  padding: 20px;
}

.box {
  /* Ορίζει τη θέση του στοιχείου ως απόλυτη στο πλαίσιο του γονέα */
  position: absolute;

  /* Ορίζει την απόσταση από το πάνω μέρος του γονέα σε 50px */
  top: 50px;

  /* Ορίζει την απόσταση από το αριστερό μέρος του γονέα σε 50px */
  left: 50px;

  /* Ορίζει το χρώμα του φόντου σε ανοιχτό μπλε */
  background-color: lightblue;

  /* Προσθέτει περιθώριο 10px στο εσωτερικό του πλαισίου */
  padding: 10px;
}

p {
  /* Ορίζει το περιθώριο γύρω από το παράγραφο στο 0 */
  margin: 0;
}

Σε αυτό το παράδειγμα, ο εσωτερικός παράγοντας <div> με κλάση .box έχει position: absolute;. Οι ιδιότητες top: 50px; και left: 50px; ορίζουν τη θέση του <div> σχετικά με τον πλησιέστερο θεμελιωμένο πρόγονο (.container).

Αυτό σημαίνει ότι το <div> θα τοποθετηθεί 50 pixels προς τα κάτω και 50 pixels προς τα δεξιά από τον πλησιέστερο θεμελιωμένο πρόγονο (.container). Ο παράγοντας <div> με κλάση .box αφαιρείται από την κανονική ροή του εγγράφου και μπορεί να επικαλύπτει άλλα στοιχεία.

Ένα στοιχείο με position: sticky; τοποθετείται με βάση τη θέση κύλισης του χρήστη.

Ένα sticky στοιχείο εναλλάσσεται μεταξύ της σχετικής θέσης (relative) και της σταθερής θέσης (fixed), ανάλογα με τη θέση κύλισης. Αρχικά, το στοιχείο είναι θέση σχετική και ακολουθεί την κανονική ροή του εγγράφου. Όταν η θέση του φτάσει σε μια συγκεκριμένη θέση οριοθετημένη από το viewport, τότε “κολλάει” στη θέση αυτή (όπως το position: fixed).

Παράδειγμα:

HTML:

<div class="container">
  <p>This is a sticky element.</p>
</div>

CSS:

.container {
  /* Ορίζει το ύψος του στοιχείου σε 2000px */
  height: 2000px;

  /* Προσθέτει περιθώριο στοιχείου */
  padding: 20px;
}

p {
  /* Ορίζει τη θέση του στοιχείου ως sticky */
  position: sticky;

  /* Ορίζει την κορυφή του στοιχείου σε 20px */
  top: 20px;

  /* Ορίζει το χρώμα του φόντου σε lightblue */
  background-color: lightblue;

  /* Προσθέτει περιθώριο στοιχείου */
  padding: 10px;
}

Σε αυτό το παράδειγμα, έχουμε ένα <p> στοιχείο με position: sticky;. Η ιδιότητα top: 20px; ορίζει τη θέση του στοιχείου 20 pixels πάνω από την κανονική του θέση. Όταν ο χρήστης κυλάει τη σελίδα, το στοιχείο παραμένει στην κανονική του θέση μέχρι να φτάσει στην περιοχή που ορίζεται από το viewport. Σε αυτό το σημείο, το στοιχείο “κολλάει” στη θέση αυτή και παραμένει εκεί ακόμα και κατά την κύλιση της σελίδας.

[adinserter block=”4″]

Για να τοποθετήσετε κείμενο πάνω από μια εικόνα, μπορείτε να χρησιμοποιήσετε το στοιχείο <div> για να δημιουργήσετε έναν γονικό περιέκτη για την εικόνα και το κείμενο. Στη συνέχεια, μπορείτε να εφαρμόσετε τις απαραίτητες ιδιότητες CSS για να τοποθετήσετε το κείμενο επάνω από την εικόνα.

Παράδειγμα:

HTML:

<div class="image-container">
  <img src="path-to-your-image.jpg" alt="Your Image">
  <div class="text-overlay">
    <!-- Κείμενο που εμφανίζεται πάνω από την εικόνα -->
    <h2>Καλώς ήρθατε!</h2>
    <p>Αυτή είναι μια εικόνα με κείμενο επάνω της.</p>
  </div>
</div>

CSS:

.image-container {
  /* Ορίζει τη θέση του στοιχείου ως σχετική */
  position: relative;

  /* Ορίζει την εμφάνιση του στοιχείου ως ενσωματωμένη ενότητα */
  display: inline-block;
}

.text-overlay {
  /* Ορίζει τη θέση του στοιχείου ως απόλυτη */
  position: absolute;

  /* Ορίζει την απόσταση από το επάνω μέρος στο 50% του γονικού στοιχείου */
  top: 50%;

  /* Ορίζει την απόσταση από το αριστερό μέρος στο 50% του γονικού στοιχείου */
  left: 50%;

  /* Ορίζει τη μετατόπιση του στοιχείου κατά -50% στον οριζόντιο και κατακόρυφο άξονα */
  transform: translate(-50%, -50%);

  /* Ορίζει το χρώμα του φόντου ως ημιδιάφανο μαύρο */
  background-color: rgba(0, 0, 0, 0.7);

  /* Ορίζει το χρώμα του κειμένου ως λευκό */
  color: white;

  /* Ορίζει το περιθώριο του στοιχείου */
  padding: 20px;

  /* Ορίζει τον κείμενο να είναι στο κέντρο */
  text-align: center;
}

.text-overlay h2 {
  /* Ορίζει το περιθώριο του κεφαλίδας h2 στο επάνω μέρος ως 0 */
  margin-top: 0;
}

.text-overlay p {
  /* Ορίζει το περιθώριο της παραγράφου p στο κάτω μέρος ως 0 */
  margin-bottom: 0;
}

Σε αυτό το παράδειγμα, ο γονικός περιέκτης .image-container έχει position: relative; για να επιτρέψει τη θέση των απόλυτα θέσεων του κειμένου εντός του. Το κείμενο επικαλύπτεται με το στοιχείο .text-overlay, το οποίο έχει position: absolute; για να τοποθετηθεί στην επιθυμητή θέση. Οι ιδιότητες top: 50%; και left: 50%; συνδυάζονται με την transform: translate(-50%, -50%); για να τοποθετήσουν το κείμενο στο

κέντρο του γονικού στοιχείου. Το φόντο του .text-overlay είναι μαύρο με 70% διαφάνεια (rgba(0, 0, 0, 0.7)), και το χρώμα του κειμένου είναι λευκό. Τέλος, προσαρμόζετε τα περιθώρια (padding) και τη στοίχιση (text-align) κατάλληλα για να δημιουργήσετε την εμφάνιση που επιθυμείτε για το κείμενο.

Μπορείτε να προσαρμόσετε τις ιδιότητες CSS στις ανάγκες και το στυλ του συγκεκριμένου σας σχεδιασμού.