Uwekezaji Kuhusisha Mzazi Kamili katika CSS

Katika somo lililopita tulichambua kwamba, kama mzazi anapewa relative, basi wazao wake watawekwa kwa usahihi kabisa kuhusiana naye. Hii ndiyo njia inayotumika mara nyingi, wakati hawataki kipengele cha mzazi kiondoke mtiririko wa kawaida.

Inaweza pia kuwa kwamba mzazi amepewa absolute. Katika kesi hii, wazao walio na absolute pia watawekwa kuhusiana na mzazi kama huyo, na si kuhusiana na dirisha ya kivinjari:

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

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

Результат:

Задание 1

Tengeneza block ya mraba yenye uwekezaji kamili ukubwa wa 400px. Ndani yake tengeneza block nyingine mbili zenye ukubwa wa 50px. Weka block ya kwanza kwenye kona ya juu kulia ya mzazi, na block ya pili - kwenye kona ya chini kushoto.