Szülőhöz viszonyított pozicionálás CSS-ben

Ha egy elemnek relative értéke van beállítva, és egy leszármazottjának absolute értéke, akkor ez a leszármazott a szülőjéhez képest fog pozicionálódni, nem a böngészőablakhoz képest.

Általában ebben az esetben a szülőnek relative értéket adnak meg elmozdulások nélkül. Ebben az esetben a szülővel semmi nem történik, de minden leszármazottja mostantól a szülőhöz képest fog pozicionálódni.

Nézzük meg példákon.

Példa

Először készítsünk egy szülő blokkot és egy leszármazott blokkot pozicionálás nélkül:

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;
}

Результат:

Példa

Most abszolút módon pozicionáljuk a zöld blokkot. Mivel a szülőnek nincs megadva a relative érték, a leszármazott a böngészőablakhoz képest fog pozicionálódni:

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;
}

Результат:

Példa

Most adjuk meg a szülőnek a relative értéket. Ebben az esetben a leszármazott a saját szülőjéhez képest fog pozicionálódni:

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;
}

Результат:

Gyakorlati feladatok

A következő feladatokban a fő blokk középre van igazítva a margin tulajdonsággal auto értéken, a többi pedig a szülőhöz képest pozicionálódik a position tulajdonság segítségével.