Σχετική Τοποθέτηση Στοιχείων στο CSS

Η σχετική τοποθέτηση ορίζεται με τη χρήση της τιμής relative για την ιδιότητα position. Αυτός ο τύπος τοποθέτησης επιτρέπει τη μετατόπιση στοιχείων σε σχέση με την τρέχουσα θέση τους κατά ένα δεδομένο μέγεθος. Εν τω μεταξύ όλα τα άλλα στοιχεία της σελίδας θα "πιστεύουν" ότι το στοιχείο βρίσκεται εκεί που ήταν αρχικά. Δηλαδή, με αυτόν τον τύπο τοποθέτησης το στοιχείο δεν βγαίνει από τη normal flow.

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

Παράδειγμα

Αρχικά, ας δημιουργήσουμε δύο απλά blocks χωρίς τοποθέτηση:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Παράδειγμα

Ας προσθέσουμε τώρα relative στο πρώτο block. Από μόνο του αυτό δεν αλλάζει τίποτα, αφού δεν έχουμε καθορίσει μετατόπιση για το block:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Παράδειγμα

Ας μετακινήσουμε τώρα το block μας κατά 30px από πάνω, ορίζοντας την ιδιότητα top. Ενώ όλα τα άλλα στοιχεία θα συμπεριφέρονται σαν το block μας να παραμένει εκεί που ήταν αρχικά:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Παράδειγμα

Ας μετακινήσουμε επίσης το block μας κατά 40px από αριστερά, ορίζοντας την ιδιότητα left:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Παράδειγμα

Οι αρνητικές τιμές των ιδιοτήτων top, right, bottom και left μετατοπίζουν προς την αντίθετη κατεύθυνση. Για παράδειγμα, μια θετική τιμή top μετατοπίζει προς τα κάτω, ενώ μια αρνητική - προς τα πάνω.

Ας μετακινήσουμε το δεύτερο block μας κατά 40px προς τα πάνω, ορίζοντας μια αρνητική τιμή για την ιδιότητα top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Πρακτικές Ασκήσεις

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
κείμενο κείμενο κείμενο

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}