position ගුණාංගය
position ගුණාංගය මූලද්රව්ය ස්ථානගත කිරීමේ
ක්රමය නියම කරයි. මෙම ගුණාංගය බොහෝ විට
top,
right,
bottom,
left,
ගුණාංග සමඟ එක්ව භාවිතා කරනු ලබන අතර, ඒවා පිළිවෙලින්
ඉහළින්, දකුණින්, පහළින්, වම්පසින් ඉඩ පරතරයන් සකසයි.
වාක්ය රචනය
තේරුම්ගන්නා {
position: absolute | relative | fixed | static | sticky;
}
position සඳහා අගයන්
| අගය | විස්තරය |
|---|---|
absolute |
සම්පූර්ණ ස්ථානගත කිරීම. මූලද්රව්යය වැඩිපුරම ලේඛනයේ සාමාන්ය ප්රවාහයෙන් ඉවත් කරනු ලබන අතර ආසන්නතම ස්ථානගත පූර්වප්රාප්තිකයා (තිබේ නම්) හෝ බ්රවුසර කවුළුවට සාපේක්ෂව ස්ථානගත කරනු ලැබේ. |
relative |
සාපේක්ෂ ස්ථානගත කිරීම. මූලද්රව්යය ලේඛන ප්රවාහය තුළ එහි සාමාන්ය ස්ථානයට සාපේක්ෂව මාරු වේ, නමුත් එය අල්ලාගෙන සිටින අවකාශය කොටස් කර තබා ඇත. |
fixed |
ස්ථිර ස්ථානගත කිරීම. මූලද්රව්යය ලේඛනයේ සාමාන්ය ප්රවාහයෙන් ඉවත් කරනු ලබන අතර ස්ථානගත කරනු ලැබේ බ්රවුසර කවුළුවට සාපේක්ෂව. පිටුව අනුචලනය කිරීමේදී ස්ථානයේම රැඳේ. |
static |
ස්ථිතික ස්ථානගත කිරීම. මෙම අගයෙන් අදහස් වන්නේ ස්ථානගත කිරීමක් නොමැති බවයි සහ මූලද්රව්යය සාමාන්ය පරිදි ක්රියා කරයි. |
sticky |
ඇලවෙන ස්ථානගත කිරීම.
මූලද්රව්යය relative ලෙස හැසිරේ, එය නියම කරන තෙක්
ස්ථානයකට ළඟා වන විට අනුචලනය කිරීමෙන් පසු, එය නියම කරන තැනට ඇලේ
(fixed ලෙස).
|
පෙරනිමි අගය: static.
උදාහරණය . සම්පූර්ණ ස්ථානගත කිරීම
කුඩා ඉඩ පරතරයන් සහිතව මූලද්රව්යය තිරයේ ඉහළ වම් කෙළවරේ ස්ථානගත කරමු:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
උදාහරණය . සම්පූර්ණ ස්ථානගත කිරීම
දැන් මූලද්රව්යය කුඩා ඉඩ පරතරයන් සහිතව තිරයේ ඉහළ දකුණු කෙළවරේ ස්ථානගත කරමු:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
උදාහරණය . ස්ථිර ස්ථානගත කිරීම
ස්ථිර ස්ථානගත කිරීම සමඟ, මූලද්රව්යය පිටුව අනුචලනය කිරීමේදී ස්ථානයේම රැඳේ:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
උදාහරණය . සාපේක්ෂ ස්ථානගත කිරීම
සාපේක්ෂ ස්ථානගත කිරීම සමඟ, මූලද්රව්යය මාරු වේ එහි සාමාන්ය ස්ථානයට සාපේක්ෂව, නමුත් අනෙකුත් මූලද්රව්ය එලෙසම හැසිරේ, මූලද්රව්යය මාරු නොවූවාක් මෙන්:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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 නම්,
සම්පූර්ණ ස්ථානගත කරන ලද මූලද්රව්ය
මව් මූලද්රව්යයට සාපේක්ෂව ස්ථානගත වේ:
<div class="container">
<div class="elem"></div>
</div>
.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 නම්,
සම්පූර්ණ ස්ථානගත කරන ලද මූලද්රව්ය
මව් මූලද්රව්යයට සාපේක්ෂව ස්ථානගත වේ:
<div class="container">
<div class="elem"></div>
</div>
.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 ලෙස, එය නියම කරන තෙක්
ස්ථානයකට ළඟා වන විට අනුචලනය කිරීමෙන් පසු, එය එම ස්ථානයට ඇලේ.
අපි ඇලවෙන ශීර්ෂකයක් සාදමු:
<h1>ප්රධාන වෙබ් අඩවි ශීර්ෂකය</h1>
<div class="header">ශීර්ෂකය ශීර්ෂකය ශීර්ෂකය</div>
<div class="main">
some long text
</div>
h1 {
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;
}
:
උදාහරණය . ස්ථානගත කිරීමක් නොමැතිව
මූලද්රව්යයකට සම්පූර්ණ ස්ථානගත කිරීම පවරා ස්ථානය නියම කිරීමකින් තොරව නම්, මූලද්රව්යය ස්ථානගත කිරීමකින් තොරව එය සිටින ස්ථානයේම රැඳී සිටිනු ඇත, නමුත් අනෙකුත් මූලද්රව්ය එය නොසලකා හැරීම ආරම්භ කරයි:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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 ගුණාංගය නියම කළහොත්,
සිරස් අතට මූලද්රව්යය අවශ්ය
ස්ථානයට යන අතර, තිරස් අතට එය සිටින තැනම,
රැඳී සිටිනු ඇත:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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;
}
:
උදාහරණය . සියලුම ස්ථාන
සම්පූර්ණ ස්ථානගත කිරීමේදී සියලු පැති වලින් ස්ථාන නියම කළ හැක, පළල සහ උස නියම කිරීමකින් තොරව. මෙම අවස්ථාවේදී මූලද්රව්යය ස්ථානගත වන්නේ මව් කොටස මධ්යයට ය:
<div class="container">
<div class="elem"></div>
</div>
.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;
}
:
මේවාත් බලන්න
-
z-indexගුණාංගය,
මූලද්රව්ය අතිච්ඡාදනය නියම කරයි
