পজিশন রিলেটিভ (position:relative)
HTML উপাদান সমূহের স্বাভাবিক অবস্থানের সাপেক্ষে top, bottom, left, and right প্রোপার্টি ব্যবহারের মাধ্যমে কোন বস্তুর অবস্থান নির্ধারণের জন্য রিলেটিভ পজিশন প্রোপার্টি ব্যবহার করা হয়। পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়, তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করে, কিন্তু পজিশন রিলেটিভ এবং পজিশন স্ট্যাটিক প্রোপার্টির মধ্যে পার্থক্য হচ্ছে পজিশন স্ট্যাটিক প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় থাকে; আর পজিশন রিলেটিভ প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমেই কোন বস্তুর অবস্থান নির্দেশ করা হয়।
পজিশন রিলেটিভ প্রোপার্টির ক্ষেতে সকল হিসাব শুরু হয় ঐ উপাদানটির স্বাভাবিক অবস্থান থেকে। অর্থাৎ পজিশনিং না করা হলে উপাদানটি যে স্থানে অবস্থান করতো সেখান থেকে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;
}
h3
{
color:#F09;
background:#CC9;
padding:10px;
border:#960 1px solid;
width:370px;
}
#right{position:relative;
left:100px;}
#left{position:relative;
right:100px;
}
#down{position:relative;
top:150px;}
</style>
</head>
<body >
<h1>Normal Position</h1>
<h1 id="right">Position 100px right from Normal Position. </h1>
<h1 id="left">Position 100px left from Normal Position. </h1>
<h1 id="down">Position 150px down from Normal Position.</h1>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত