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:
<div id="parent">
<div id="child"></div>
</div>
#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:
<div id="parent">
<div id="child"></div>
</div>
#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:
<div id="parent">
<div id="child"></div>
</div>
#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.
