Θέση σε σχέση με το γονέα στο CSS

Αν ένα στοιχείο έχει οριστεί σε relative, και ο απόγονός του - σε absolute, τότε αυτός ο απόγονος θα τοποθετείται σε σχέση με τον γονέα του, και όχι σε σχέση με το παράθυρο του προγράμματος περιήγησης.

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

Ας δούμε παραδείγματα.

Παράδειγμα

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

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Παράδειγμα

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

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Παράδειγμα

Ας ορίσουμε τώρα στον γονέα relative. Σε αυτήν την περίπτωση, ο απόγονος θα τοποθετείται σε σχέση με τον γονέα του:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

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

Στις επόμενες ασκήσεις, το κύριο block βρίσκεται στο κέντρο χρησιμοποιώντας margin με τιμή auto, ενώ τα υπόλοιπα τοποθετούνται σε σχέση με αυτό χρησιμοποιώντας την ιδιότητα position.