CSS හි ඛණ්ඩාංක නොමැතිව නිරපේක්ෂ ස්ථානගත කිරීම
ඇත්ත වශයෙන්ම නිරපේක්ෂව ස්ථානගත කිරීමේදී ඛණ්ඩාංක සඳහන් කිරීම අනිවාර්ය නොවේ. මූලද්රව්යයකට
පහසුවෙන් position අගයක් ලෙස
absolute ලිවීමෙන්, එය නිරපේක්ෂව ස්ථානගත වන නමුත්
පෙර සිටගත් ස්ථානයේම පවතිනු ඇත. මේ සමඟ අනෙකුත් සියලුම මූලද්රව්ය
අපගේ මූලද්රව්යය නොමැති බවට හැසිරෙන අතර ඒ මත පැනීමට හැකිය.
අපි උදාහරණ මගින් බලමු.
උදාහරණය
පළමුවෙන් අපි ස්ථානගත කිරීමකින් තොරව බ්ලොක් තුනක් සහ ඒවා අතර පෙළ කොටසක් සාදමු:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
උදාහරණය
දැන් අපි කොළ බ්ලොක් එකට absolute එකතු කරමු.
ප්රතිඵලයක් වශයෙන් මෙම බ්ලොක් එක ස්ථානයේම පවතින අතර,
පහළ ඇති සියලුම මූලද්රව්ය අපගේ මූලද්රව්යය නොමැති බවට
හැසිරී ඒ මත පැනීම සිදු කරයි:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
උදාහරණය
දැන් අපි left ගුණාංගය එකතු කරමු,
සිරස් ස්ථානගත කිරීමක් එකතු නොකරමින්. ප්රතිඵලයක් වශයෙන්
තිරස් අතට අපගේ බ්ලොක් එක නිශ්චිත අගයට ගමන් කරන අතර,
සිරස් අතට - පෙර සිටගත් ස්ථානයේම පවතී:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* තිරස් ස්ථානගත කිරීම එකතු කිරීම */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
උදාහරණය
දැන් අපි, අනෙක් අතට, top ගුණාංගය එකතු කරමු,
තිරස් ස්ථානගත කිරීමක් එකතු නොකරමින්.
ප්රතිඵලයක් වශයෙන් සිරස් අතට අපගේ බ්ලොක් එක
නිශ්චිත අගයට ගමන් කරන අතර, තිරස් අතට -
පෙර සිටගත් ස්ථානයේම පවතී:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* සිරස් ස්ථානගත කිරීම එකතු කිරීම */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
