𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀
CSS position property নির্ধারণ করে যে একটি element আপনার পেজে কোথায় থাকবে। সেগুলোকে সরানোর জন্য আপনি top, right, bottom এবং left ব্যবহার করেন।
পজিশনিংয়ের প্রধান পাঁচটি ধরন রয়েছে।
Static এটি ডিফল্ট সেটিং। Element-গুলো পেজের স্বাভাবিক ক্রম অনুসরণ করে। এখানে top বা left প্রপার্টি ব্যবহার করলে কোনো পরিবর্তন হয় না।
Relative এটি একটি element-কে তার আসল অবস্থান থেকে সরিয়ে নেয়। আপনি যদি top-এ 20px যোগ করেন, তবে element-টি নিচে নেমে যাবে। অন্যান্য element-গুলো তাদের আসল জায়গাতেই থাকবে এবং ফাঁকা জায়গাটি পূরণ করবে না।
Absolute এটি একটি element-কে পেজের স্বাভাবিক প্রবাহ (flow) থেকে সরিয়ে ফেলে। এটি তার নিকটতম পজিশন করা ancestor-এর ওপর ভিত্তি করে নিজেকে পজিশন করে।
অন্যান্য ধরনের মধ্যে রয়েছে Fixed এবং Sticky। Fixed element-গুলো স্ক্রল করার সময়ও এক জায়গায় স্থির থাকে। Sticky element-গুলো একটি নির্দিষ্ট পয়েন্টে না পৌঁছানো পর্যন্ত relative element-এর মতো কাজ করে, তারপর সেগুলো fixed হয়ে যায়।
এই প্রপার্টিগুলো সম্পর্কে আরও জানুন এখানে।
উৎস: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8