CSS හි මූලද්‍රව්‍යවල නිරපේක්ෂ පිහිටුම් කිරීම

මෙම පාඩමෙන් අපි මූලද්‍රව්‍යවල නිරපේක්ෂ පිහිටුම් කිරීම විශ්ලේෂණය කරන්නෙමු. එයට පිටුවේ නියම කරන ලද ඛණ්ඩාංක අනුව මූලද්‍රව්‍ය ස්ථානගත කිරීමට ඉඩ සලසයි. උදාහරණයක් ලෙස, ඔබට මූලද්‍රව්‍යයක් පිටුවේ ඉහළින් 100px සහ වම්පසින් 200px කාරණයේ ස්ථානගත කළ හැකිය. මූලද්‍රව්‍යය එහි ගමන් කරනු ඇත, එහි වෙනත් මූලද්‍රව්‍ය පිහිටා ඇති බව නොසලකා, සහ ඒවා මතුපිට සරලව පිහිටනු ඇත. මේ සමඟ මූලද්‍රව්‍යය ලේඛනයේ සාමාන්‍ය ප්‍රවාහයෙන් පිටතට වැටෙන බව කියනු ලැබේ: අනෙක් සියලුම මූලද්‍රව්‍ය අපගේ මූලද්‍රව්‍යය නොමැති බව පෙනෙන පරිදි හැසිරෙනු ඇත.

මූලද්‍රව්‍යයක් නිරපේක්ෂව පිහිටුවීමට, එම මූලද්‍රව්‍යයට position ගුණාංගය absolute අගයට සකස් කිරීම අවශ්‍ය වේ. මෙම ගුණාංගයට අමතරව, තවත් දෙකක් අවශ්‍ය වේ: එකක් සිරස් අතට ඛණ්ඩාංකය සකසනු ඇත, සහ දෙවැන්න - තිරස් අතට.

සිරස් අතට ඉහළින් හෝ පහළින් ඉඩ සැලසීමක් සකස් කළ යුතුය. ඉහළින් ඉඩ සැලසීම top ගුණාංගය මගින් සකසයි, සහ පහළින් ඉඩ සැලසීම - bottom ගුණාංගය මගින් සකසයි. තිරස් අතට වම්පසින් හෝ දකුණුපසින් ඉඩ සැලසීමක් සකස් කළ යුතුය. වම්පසින් ඉඩ සැලසීම left ගුණාංගය මගින් සකසයි, සහ දකුණුපසින් ඉඩ සැලසීම - right ගුණාංගය මගින් සකසයි.

අපි උදාහරණ සමඟ බලමු.

උදාහරණය

පළමුව, අපි සරලව පිහිටුම් කිරීමකින් තොරව බ්ලොක් දෙකක් කරමු (මූලද්‍රව්‍ය කවුළුවේ අද්දරට තද නොවන බව සැලකිල්ලට ගන්න, මන්ද body හට පෙරනිමියෙන් margin ඇත):

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

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

Результат:

උදාහරණය

දැන් අපි ලා කොළ බ්ලොක් එකට නිරපේක්ෂ පිහිටුම් කිරීමක් කරමු, එය ඉහළින් 150px සහ වම්පසින් 100px කාරණයේ තබමු:

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

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

Результат:

උදාහරණය

දැන් අපි ලා කොළ බ්ලොක් එක ඉහළින් 0px සහ වම්පසින් 0px කාරණයේ තබමු:

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

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

Результат:

උදාහරණය

දැන් අපි ලා කොළ බ්ලොක් එක ඉහළින් 0px සහ දකුණුපසින් 0px කාරණයේ තබමු:

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

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

Результат:

උදාහරණය

දැන් අපි ලා කොළ බ්ලොක් එක පහළින් 0px සහ දකුණුපසින් 0px කාරණයේ තබමු:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

උදාහරණය

දැන් අපි ලා කොළ බ්ලොක් එක පහළින් 0px සහ වම්පසින් 0px කාරණයේ තබමු:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

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