css | absolute/relative position ගැන

වෙබ් අඩවියක්‌ සැදීමේදි අපි පාවිච්චි කරන div ස්‌තානගත කිරීමට ක්‍රම කිහිපයක්‌ තියෙනවා. සාමාන්යෙන් අපි div එකක්‌ පිටුවට අතුලත් කල පසු එහි සම්මත පිහිටීම (default) වන්නේ position:static .පිටුවට තව තවත් div එකතු කරන විට ඒවා ක්‍රමානුකූලව කලින් එකතු කල div වලට පහලින් ස්‌තානගත වෙනවා. මෙලෙස ක්‍රමානුකූලව යටින් එකතු කරනවා වෙනුවට අපිට අවශ්‍ය තැනකට කෙලින්ම div එකක්‌ එකතු කරන විට අපි පාවිච්චි කරන්නේ "absolute position". මෙය css හි position:absolute ආකාරයට ලියන්න පුලුවන්.

උදාහරණය:

සබැදිය බලන්න

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
</div>

css

#div1 { }

#div2 { }

රූපයේ දක්‌වා ඇති පරිදි පිටුවට div1, div2 වශයෙන් div එකතු කර තිබෙනවා. එම div වල position සදහා අපි වෙනම අගයන් css වලින් ලබා දී නැහැ (default). එමනිසා ඒවා පවතින්නේ position:static වශයෙන්. දැන් අපි div3 නමින් තවත් div එකක්‌ එකතු කරමු. මෙහි position එකත් default අගය නිසා එය div2 එකට යටින් එකතු වෙනවා.

සබැදිය බලන්න

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
<div id="div3">div 3 content here</div>
</div>

css

#div1 { }

#div2 { }

#div3 { }

අපි සිතමු අපිට div3 එක div1 මතට පහත රූපයේ ආකාරයට එකතු කිරීමට අවශ්‍යයි කියා. එවිට තමයි 'Absolute Positioning' අවශ්‍ය වන්නේ.

මෙහිදී අපි div 3 සදහා position:absolute ලෙස ලබා දෙනවා. වම් පැත්තෙන් පික්‌සල් 50ක ඉඩක්‌ අවශ්‍ය නිසා left:50px; වශයෙන් ලබා දෙනවා. (අවශ්‍ය තැනකට div 3 ස්‌තානගත කිරීම සදහා css හි top, right, bottom, left යොදාගන්න පුලුවන්.

css

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0;
}

සබැදිය බලන්න

දැන් අපි fixed width වෙබ් අඩවියක්‌ සදහා මෙය යොදාගන්න ආකාරය බලමු.

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
</div>

css

#wrapper { 
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

සබැදිය බලන්න

කලින් ආකාරයටම div 1 මතට div 3 දැමීමට උත්සාහ කරමු.

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
<div id="div3">div 3 content here</div>
</div>

css

#wrapper { 
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0; 
}

සබැදිය බලන්න

අපිට අවශ්‍ය ආකාරයටම වැඩේ නැහැ නේද. අපි wrapper එක පික්‌සල් 500ක පලලකට සීමා කලත් div 3 එක පිටුව පුරාම තිබෙනවා. මෙයට හේතුව වන්නේ position absolute කල div බ්‍රවුසර කවුලුවේ ප්‍රමානයට අනුකූලව හැඩගැසීමයි. div 3 එක බ්‍රව්සර කවුලුවට වම් පැත්තෙන් පික්‌සල් 50ක්‌ ඈතින් ස්‌තානගත වී තිබෙනවා. මෙය නිවැරදි කරගැනීමට අපිට 'Relative Positioning' පාවිච්චි කරන්නට පුලුවන්. එවිට position:relative කල div තුල ඇති position:absolute කල div ක්‍රියා කරන්නේ එම position:relative කල div එකට අනුරූපවයි. උදාහරනයට අනුව div 3 එක ස්‌තානගත වන්නේ position:relative කල wrapper div එකට අනුවයි.

css

#wrapper { 
    position:relative;
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0; 
}

සබැදිය බලන්න

ඔන්න දැන් හරි!

මම හැකි තරම් පැහැදිලි කරන්න උත්සාහ කලා. ගැටලු ඇත්නම් ඉදිරිපත් කරන්න.