Thamani Hasibu katika Uwekaji Nafasi katika CSS

Sifa tulizosoma top, right, bottom na left zinaweza kukubali sio tu thamani chanya, bali pia thamani hasibu. Hebu tuangalie kwa mifano.

Mfano

Katika mfano ufuatao kipengele kinawekwa nafasi kabisa ukilinganisha na kipenzi chake na kinasimama katika nafasi 0 kutoka juu, 0 kutoka kushoto:

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

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

Результат:

Mfano

Na sasa hebu tusogeze kipengele hadi nafasi -20px kutoka juu, -30px kutoka kushoto:

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

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: