Uwekaji Nafasi Kuhusiana na Mzazi katika CSS

Ikiwa kipengele kimepewa relative, na kizazi chake - absolute, basi kizazi hiki kitawekwa nafasi kuhusiana na mzazi wake, wala si kuhusiana na dirisha la kivinjari.

Kwa kawaida, katika kesi hiyo mzazi hupewa relative bila uhamisho. Katika kesi hii hakuna kitu kinachotokea kwa mzazi huyu, lakini vizazi vyake vyote sasa vitawekwa nafasi kuhusiana naye.

Tuangalie kwa mifano.

Mfano

Kwanza tufanye tu block-mzazi na block-kizazi bila uwekaji nafasi:

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

Результат:

Mfano

Sasa tuweke nafasi kizazi kijani kwa njia kamili. Kwa kuwa mzazi hajawekwi relative, kizazi kitawekwa nafasi kuhusiana na dirisha la kivinjari:

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

Результат:

Mfano

Sasa tumpe mzazi relative. Katika kesi hii kizazi kitawekwa nafasi kuhusiana na mzazi wake:

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

Результат:

Kazi za Vitendo

Katika kazi zifuatazo block kuu iko katikati kwa kutumia margin kwa thamani auto, na zingine zinawekwa nafasi kuhusiana nayo kwa kutumia sifa position.