CSS හි දෙමාපියන්ට සාපේක්ෂව පිහිටීම
අංගයකට relative ලබා දී ඇත්නම් සහ
එහි සන්තතියකට - absolute ලබා දී ඇත්නම්, මෙම සන්තතිය
තම දෙමාපියන්ට සාපේක්ෂව පිහිටුවනු ඇත,
බ්රවුසර කවුළුවට සාපේක්ෂව නොවේ.
සාමාන්යයෙන්, මෙවැනි අවස්ථාවක දෙමාපියාට දක්වන්නේ විස්ථාපනයන් නොමැතිව relative වේ. මෙම අවස්ථාවේ දී මෙම දෙමාපියා සමඟ කිසිවක් සිදු නොවේ, නමුත් එහි සියලුම සන්තති දැන් ඔහුට සාපේක්ෂව පිහිටුවනු ඇත.
අපි උදාහරණ මගින් බලමු.
උදාහරණය
පළමුව, අපි සරලව දෙමාපිය බ්ලොක් එකක් සහ සන්තති බ්ලොක් එකක් පිහිටීම නොමැතිව සාදමු:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
width: 200px;
height: 200px;
border: 1px solid green;
}
:
උදාහරණය
දැන් අපි හරිත බ්ලොක් එක නිරපේක්ෂව පිහිටුවමු.
දෙමාපියාට relative දක්වා නොමැති නිසා,
සන්තතිය බ්රවුසර කවුළුවට සාපේක්ෂව
පිහිටුවනු ඇත:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
උදාහරණය
දැන් අපි දෙමාපියාට relative දක්වමු. මෙම
අවස්ථාවේ දී සන්තතිය තම දෙමාපියාට සාපේක්ෂව
පිහිටුවනු ඇත:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
ප්රායෝගික කාර්යයන්
පහත කාර්යයන් වල, ප්රධාන බ්ලොක් එක
මධ්යයේ margin භාවිතයෙන් ස්ථානගත කර ඇත
auto අගය ලෙස, සහ අනෙක් ඒවා පිහිටුවා ඇත
එයට සාපේක්ෂව
ගුණාංගය position භාවිතා කරමින්.
