CSS හි මූලද්රව්යවල සාපේක්ෂ ස්ථානගත කිරීම
සාපේක්ෂ ස්ථානගත කිරීම නියම කරනු ලබන්නේ
position ගුණය සඳහා
relative අගය භාවිතා කරමිනි. මෙවැනි
ස්ථානගත කිරීමක් මූලද්රව්යයන් ඒවායේ වර්තමාන
ස්ථානයෙන් දෙන ලද ප්රමාණයකින් මාරු කිරීමට
ඉඩ සලසයි. මෙය සිදු කරන විට
පිටුවේ අනෙකුත් සියලුම මූලද්රව්ය සිතන්නේ,
මූලද්රව්යය ආරම්භයේදී සිටියේ එහිම ය.
එනම් මෙම වර්ගයේ ස්ථානගත කිරීම සමඟ මූලද්රව්යය
සාමාන්ය ප්රවාහයෙන් ඉවත් නොවේ.
වර්තමාන ස්ථානයෙන් මාරු කිරීම් නියම කරනු ලබන්නේ
top, right, bottom සහ
left යන ගුණාංග මගිනි.
උදාහරණය
පළමුව, අපි ස්ථානගත කිරීමකින් තොරව බ්ලොක් දෙකක් කරමු:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
උදාහරණය
දැන් අපි පළමු බ්ලොක් වෙත relative එක් කරමු.
මෙයින් තවමත් කිසිවක් වෙනස් නොවනු ඇත, මන්ද
අපි බ්ලොක් එක මාරු කිරීම නියම කර නොමැති බැවිනි:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
උදාහරණය
දැන් අපි අපගේ බ්ලොක් එක ඉහළින් 30px කින්
මාරු කරමු, එයට top ගුණය නියම කරමින්.
මෙය සිදු කරන විට
අනෙකුත් සියලුම මූලද්රව්ය හැසිරෙන්නේ
අපගේ බ්ලොක් එක ආරම්භයේදී සිටිය
ස්ථානයේම පවතිනවා වගේ.
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
උදාහරණය
අපි අපගේ බ්ලොක් එක වමට 40px කින්ද
මාරු කරමු, එයට left ගුණය නියම කරමින්:
<div id="elem1"></div>
<div id="elem2"></div>
#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 ගුණයේ ඍණ අගය
නියම කරමින්:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
ප්රායෝගික කාර්යයන්
පහත බ්ලොක් ලබා දී ඇත:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#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;
}
:
සාපේක්ෂ ස්ථානගත කිරීම භාවිතා කරමින් මෙම බ්ලොක් පහත ආකාරයට මාරු කරන්න:
