Relative position এবং Absolute position in CSS

CSS এর চারটি Position Property আছে । তার মধ্যে দুটি Property নিয়ে কম বেশি সবারই Cofusion থাকে।

আজকে আমরা এই দুটি প্রোপার্টি নিয়ে আলোচনা করব। 

Relative position: কোন Div কে যদি আমরা position: relative করি এটা দ্বারা বুঝায় ঐ Div টা ফ্লেক্সিবল হয়ে গেল । এটাকে আমরা এখন top, right, left, bottom প্রোপার্টি সেট করে দিতে পারি। এসব প্রোপার্টি কাজ করবে তার div এর যায়গা থেকে অর্থাৎ তার নিজস্ব জায়গা থেকে  top, right, left, bottom move করবে। top, right, left, bottom move মান নেগেটিভ হতে পারে।  Div টা  তার  যে জায়গা থেকে সরবে সেই জায়গায় অন্য কোন ডিভ আসতে পারবে না। মনে কর তোমার স্কুলের হেড মাষ্টার ৩ দিনের ছুটিতে গেছে, এখন কি তার চেয়ারে অন্য কেউ বসতে পারবে? নিশ্চই না। Relative ব্যাপারটাই এমন। সে তার জায়গা থেকে সব জায়গায় সরতে পারে কিন্তু তার যায়গা সব সময় খালি পড়ে থাকবে। একটু কোড করে দেখ আর ক্লিয়ার হবে। এখান থেকে জাস্ট কনসেপ্ট নাও। 

Absolute position: এই প্রোপার্টিটাও Relative এর মতই কাজ করে । তবে এখানে তার যায়গায় অর্থাৎ absolute Div টার যায়গায় নিচের Div চলে আসবে। মনে কর তোমার হেড মাষ্টার রিটায়ার করছে। এবার তো আর চেয়ার খালি পড়ে থাকবে না। কেউ না কেউ তো এসে জায়গা দখল করবে।

 এখন এটাকে আমরা এখন top, right, left, bottom প্রোপার্টি সেট করে দিতে পারি। এসব প্রোপার্টি কাজ করবে তার parent Div এর যায়গা থেকে । আমরা যদি তার উপরের Div বা parent div কে relative করে দেই তাহলে absolute div টা parent div এর মধ্যেই ঘোরা ঘুরি করবে অর্থাৎ top, right, left, bottom তার parent div এর উপর ভিত্তি করে। আর যদি নেগেটিভ Valu দেই তাহলে parent div এর বাহিরে চলে যেতে পারে। আর অবশ্যই parent, child সম্পর্ক যেন ঠিক থাকে না হলে কিন্তু কাজ করবে না । 

 আর যদি আমরা কোন  parent div কে absolute না করে দিই। তাহলে by default web page কে তার absolute parent div হিসেবে ধরে নেবে। সেই অনুযায়ী top, right, left, bottom প্রোপার্টি সেট করে দিতে পারি।

এবার নিচের ইমেজটা দেখে বোঝার চেষ্টা কর।