CSS දිගු කිරීම් වල ඍණාත්මක අගයන්

අප අධ්‍යයනය කළ top, right, bottom සහ left ගුණාංග ධනාත්මක අගයන් පමණක් නොව, ඍණාත්මක අගයන් ද ගත හැකිය. අපි උදාහරණ මගින් බලමු.

උදාහරණය

පහත උදාහරණයේ, මූලද්‍රව්‍යය එහි මව් අංගයට සාපේක්‍ෂව සම්පූර්ණයෙන්ම ස්ථානගත කර ඇති අතර ඉහළින් 0, වමට 0 ස්ථානයේ පවතී:

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

Результат:

උදාහරණය

දැන් අපි මූලද්‍රව්‍යය ස්ථානගත කරමු ඉහළින් -20px, වමට -30px:

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

Результат: