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

සාපේක්ෂ ස්ථානගත කිරීම නියම කරනු ලබන්නේ position ගුණය සඳහා relative අගය භාවිතා කරමිනි. මෙවැනි ස්ථානගත කිරීමක් මූලද්‍රව්‍යයන් ඒවායේ වර්තමාන ස්ථානයෙන් දෙන ලද ප්‍රමාණයකින් මාරු කිරීමට ඉඩ සලසයි. මෙය සිදු කරන විට පිටුවේ අනෙකුත් සියලුම මූලද්‍රව්‍ය සිතන්නේ, මූලද්‍රව්‍යය ආරම්භයේදී සිටියේ එහිම ය. එනම් මෙම වර්ගයේ ස්ථානගත කිරීම සමඟ මූලද්‍රව්‍යය සාමාන්‍ය ප්‍රවාහයෙන් ඉවත් නොවේ.

වර්තමාන ස්ථානයෙන් මාරු කිරීම් නියම කරනු ලබන්නේ top, right, bottom සහ left යන ගුණාංග මගිනි.

උදාහරණය

පළමුව, අපි ස්ථානගත කිරීමකින් තොරව බ්ලොක් දෙකක් කරමු:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

උදාහරණය

දැන් අපි පළමු බ්ලොක් වෙත relative එක් කරමු. මෙයින් තවමත් කිසිවක් වෙනස් නොවනු ඇත, මන්ද අපි බ්ලොක් එක මාරු කිරීම නියම කර නොමැති බැවිනි:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

උදාහරණය

දැන් අපි අපගේ බ්ලොක් එක ඉහළින් 30px කින් මාරු කරමු, එයට top ගුණය නියම කරමින්. මෙය සිදු කරන විට අනෙකුත් සියලුම මූලද්‍රව්‍ය හැසිරෙන්නේ අපගේ බ්ලොක් එක ආරම්භයේදී සිටිය ස්ථානයේම පවතිනවා වගේ.

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

උදාහරණය

අපි අපගේ බ්ලොක් එක වමට 40px කින්ද මාරු කරමු, එයට left ගුණය නියම කරමින්:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

උදාහරණය

top, right, bottom සහ left යන ගුණාංගවල ඍණ අගයන් විරුද්ධ දිශාවට මාරු කරයි. උදාහරණයක් ලෙස, top හි ධන අගය පහළට මාරු කරන අතර, ඍණ අගය - ඉහළට.

අපි අපගේ දෙවන බ්ලොක් එක ඉහළට 40px කින් මාරු කරමු, එයට top ගුණයේ ඍණ අගය නියම කරමින්:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ප්‍රායෝගික කාර්යයන්

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}