ওয়েব ডিজাইনারদের জন্য CSS এর position প্রোপার্টি ব্যবহার সম্পর্কে খুব ভালো ধারণা থাকা খুবই জরুরী। বিভিন্ন HTML ইলিমেন্ট সমূহ একটা ওয়েব পেজে কিভাবে প্রদর্শিত হবে তা নির্দেশ করার জন্য CSS এর position প্রোপার্টি ব্যবহার করা হয়। সাথে CSS এর top, bottom, left, and right প্রোপার্টি সমূহ ব্যবহার করে HTML ইলিমেন্ট সমূহের প্রকৃত অবস্থান নির্ধারণ করা হয়। CSS এর position প্রোপার্টি চার ধরণের value হতে পারে।
একটা HTML ইলিমেন্ট এর জন্য CSS এ পজিশন প্রোপার্টি যদি স্ট্যাটিক করা হয়, তা HTML ইলিমেন্ট সাধারণ এবং স্বাভাবিক পজিশন নির্দেশ করে। সাধারণত স্ট্যাটিক পজিশন (position:static) ব্যবহারের প্রযোজন হয় না। তবে পর্বে থেকে একটা HTML ইলিমেন্ট এর পজিশন হিসেবে অন্যকোন প্রোপার্টি যেমন ফিক্সড পজিশন (position:fixed) বা এবসলিউট পজিশন (position:absolute) করা থাকলে তা ওভার রাইট করে স্ট্যাটিক করার জন্য স্ট্যাটিক পজিশন (position:static) প্রোপার্টি ব্যবহার করা হয়।
যেমন
#div_area_1 {
position:static;
}
যদি একটা HTML ইলিমেন্টকে তার স্বাভাবিক অবস্থানে সাপেক্ষে কিছুটা উপরে-নিচে বা ডানে-বামে সরিয়ে অবস্থান করাতে হয় তাহলে ঐ HTML ইলিমেন্ট এর CSS এর position প্রোপার্টির মান রিলেটিভ (position:relative) নির্ধারণ করে দিতে হবে। সেই সাথে CSS এর top, bottom, left, and right প্রোপার্টি ব্যবহারের মাধ্যমে HTML ইলিমেন্টকে তার স্বাভাবিক অবস্থানে সাপেক্ষে সরাতে হয়। যেমন
#div_area_1 {
position:relative;
top:20px;
left:-40px;
}
তাহলে div_area_1 আইডি যুক্ত যে HTML ইলিমেন্টটি রয়েছে তার অবস্থান স্বাভাবিকের চেয়ে উপর থেকে 20px পরিমান নিচে চলে আসবে এবং বামদিকে 40px সরে যাবে।
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="RelativeDive"> Relative Positioned Div Element <pre><b>background:#F8F7C3; border: 1px solid #FFF; padding: 20px; width: 320px; <b>position: relative; left: 400px; top:50px;</b></pre> </div> </body> </html>
#RelativeDive {
background:#F8F7C3;
border: 1px solid #FFF;
padding: 20px;
width: 320px;
position: relative;
left: 400px;
top:50px;
}
http://codepen.io/techtunes/pen/jEpygd/
সবাইকে ধন্যবাদ । শুভকামনা রইলো।
আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।
@লিমন: আপতত ভিডিও টিউন করা সম্ভব হচ্ছে না। ধন্যবাদ ভাই। তাছাড়া ভিডিও টিউন সবাই দেখতে পারে না।
viya Video tutorial lagbe … E tune tah khub kaje debe …. r vaiya ata chain tune er moton serial nae keno?? Video tutorial make kore edit kore dele valo hoy
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
![Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট](https://dnc.techtunes.io/tDrive/tuner/ashim/324126/1uno.png "Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট")
bro etar vedio tune ase ki apnar, thkle link