position ගුණාංගය

position ගුණාංගය මූලද්‍රව්‍ය ස්ථානගත කිරීමේ ක්‍රමය නියම කරයි. මෙම ගුණාංගය බොහෝ විට top, right, bottom, left, ගුණාංග සමඟ එක්ව භාවිතා කරනු ලබන අතර, ඒවා පිළිවෙලින් ඉහළින්, දකුණින්, පහළින්, වම්පසින් ඉඩ පරතරයන් සකසයි.

වාක්‍ය රචනය

cssතේරුම්ගන්නා {
  position: absolute | relative | fixed | static | sticky;
}

position සඳහා අගයන්

පෙරනිමි අගය: static.

උදාහරණය . සම්පූර්ණ ස්ථානගත කිරීම

කුඩා ඉඩ පරතරයන් සහිතව මූලද්‍රව්‍යය තිරයේ ඉහළ වම් කෙළවරේ ස්ථානගත කරමු:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

උදාහරණය . සම්පූර්ණ ස්ථානගත කිරීම

දැන් මූලද්‍රව්‍යය කුඩා ඉඩ පරතරයන් සහිතව තිරයේ ඉහළ දකුණු කෙළවරේ ස්ථානගත කරමු:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

උදාහරණය . ස්ථිර ස්ථානගත කිරීම

ස්ථිර ස්ථානගත කිරීම සමඟ, මූලද්‍රව්‍යය පිටුව අනුචලනය කිරීමේදී ස්ථානයේම රැඳේ:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

උදාහරණය . සාපේක්ෂ ස්ථානගත කිරීම

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

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

උදාහරණය . කළඹනය

මව් මූලද්‍රව්‍යයේ position ගුණාංගයේ අගය relative නම්, සම්පූර්ණ ස්ථානගත කරන ලද මූලද්‍රව්‍ය මව් මූලද්‍රව්‍යයට සාපේක්ෂව ස්ථානගත වේ:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

උදාහරණය . කළඹනය

මව් මූලද්‍රව්‍යයේ position ගුණාංගයේ අගය absolute නම්, සම්පූර්ණ ස්ථානගත කරන ලද මූලද්‍රව්‍ය මව් මූලද්‍රව්‍යයට සාපේක්ෂව ස්ථානගත වේ:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

උදාහරණය . ඇලවෙන ස්ථානගත කිරීම

මූලද්‍රව්‍යයක් සඳහා position ගුණාංගයේ අගය sticky නම්, මූලද්‍රව්‍යය හැසිරේ relative ලෙස, එය නියම කරන තෙක් ස්ථානයකට ළඟා වන විට අනුචලනය කිරීමෙන් පසු, එය එම ස්ථානයට ඇලේ. අපි ඇලවෙන ශීර්ෂකයක් සාදමු:

html<h1>ප්‍රධාන වෙබ් අඩවි ශීර්ෂකය</h1>

<div class="header">ශීර්ෂකය ශීර්ෂකය ශීර්ෂකය</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

උදාහරණය . ස්ථානගත කිරීමක් නොමැතිව

මූලද්‍රව්‍යයකට සම්පූර්ණ ස්ථානගත කිරීම පවරා ස්ථානය නියම කිරීමකින් තොරව නම්, මූලද්‍රව්‍යය ස්ථානගත කිරීමකින් තොරව එය සිටින ස්ථානයේම රැඳී සිටිනු ඇත, නමුත් අනෙකුත් මූලද්‍රව්‍ය එය නොසලකා හැරීම ආරම්භ කරයි:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

උදාහරණය . එක් අක්ෂයක්

සම්පූර්ණ ස්ථානගත කිරීමේදී ස්ථානය නියම කළ හැක්කේ එක් අක්ෂයක් පමණි. උදාහරණයක් ලෙස, අපි top ගුණාංගය නියම කළහොත්, සිරස් අතට මූලද්‍රව්‍යය අවශ්‍ය ස්ථානයට යන අතර, තිරස් අතට එය සිටින තැනම, රැඳී සිටිනු ඇත:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

උදාහරණය . සියලුම ස්ථාන

සම්පූර්ණ ස්ථානගත කිරීමේදී සියලු පැති වලින් ස්ථාන නියම කළ හැක, පළල සහ උස නියම කිරීමකින් තොරව. මෙම අවස්ථාවේදී මූලද්‍රව්‍යය ස්ථානගත වන්නේ මව් කොටස මධ්‍යයට ය:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

මේවාත් බලන්න