CSS හි නිරපේක්ෂ දෙමාපියන්ට සාපේක්ෂව ස්ථානගත කිරීම

පෙර පාඩමේදී අපි සොයා ගත්තේ, දෙමව්පියෙකුට relative ලබා දෙන්නේ නම්, ඔහුගේ දරුවන් නිරපේක්ෂව ස්ථානගත වනු ඇති බවයි ඔහුට සාපේක්ෂව. මෙය බොහෝ විට සිදු කරනු ලැබේ, දෙමාපිය අංගයට අවශ්‍ය නොවන විට සාමාන්‍ය ප්‍රවාහයෙන් පිටතට වැටුණා.

දෙමාපියෙකුට නියම කළ විට ද එය විය හැකිය absolute. මෙම අවස්ථාවේ දී, දරුවන් සමඟ absolute ද ස්ථානගත කරනු ලැබේ එවැනි දෙමාපියෙකුට සාපේක්ෂව, සාපේක්ෂව නොවේ බ්‍රවුසර කවුළුව:

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

Результат: