সিএসএস (CSS) পজিশনিং শেখার এই যাত্রায় তোমাকে স্বাগতম! মনে করো আমি তোমার পাশে বসে আছি এবং আমরা দুজন মিলে ধাপে ধাপে এই বিষয়টি একদম সহজভাবে বুঝে নেব।

CSS পজিশনিং হলো ওয়েব ডিজাইনের সেই জাদুর কাঠি, যা দিয়ে তুমি বলে দিতে পারো—"এই বাটনটা ঠিক এখানে থাকবে" কিংবা "হেডারটা স্ক্রল করলেও সরবে না"। তোমার দেওয়া ছবিগুলো (Screenshots) বিশ্লেষণ করে আমি এই টিউটোরিয়ালটি সাজিয়েছি। চলো শুরু করি!

১. মূল হাতিয়ারগুলো (The Tools)

শুরু করার আগে আমাদের "সরঞ্জামগুলো" চিনে নেওয়া দরকার। কোনো এলিমেন্টকে জায়গা মতো বসাতে আমরা এই প্রপার্টিগুলো ব্যবহার করি (যেমনটা তোমার Screenshot-1.png এ দেখা যাচ্ছে):

• position: এটা দিয়েই আমরা ঠিক করি এলিমেন্টটি কেমন আচরণ করবে।
• দিকনির্দেশনা: top, bottom, left, right (এগুলো দিয়ে আমরা বলি—উপর থেকে কতটা নিচে নামবে, বা বাম থেকে কতটা ডানে সরবে)।
• z-index: কোনটা উপরে থাকবে আর কোনটা নিচে।

২. পজিশন: রিলেটিভ (Relative) – "নিজের জায়গা থেকে নড়াচড়া"

সবচেয়ে সহজ দিয়ে শুরু করি। ডিফল্টভাবে সব এলিমেন্ট static থাকে, অর্থাৎ তারা চুপচাপ একটার পর একটা বসে যায়। কিন্তু position: relative দিলে কী হয়?

• কনসেপ্ট: এটি এলিমেন্টকে তার আসল বা নরমাল পজিশন এর সাপেক্ষে নড়াচড়া করায়।
• গুরুত্বপূর্ণ বিষয়: এলিমেন্টটি সরে গেলেও তার আসল জায়গাটা ফাঁকাই থেকে যায় (Ghost space)। অন্য এলিমেন্টরা মনে করে সে এখনো ওখানেই আছে।

তোমার Screenshot-2.png এবং Screenshot-4.png লক্ষ্য করো:

.element {
  position: relative;
  top: 30px; /* নিজের জায়গা থেকে ৩০ পিক্সেল নিচে নামবে */
  left: 30px; /* নিজের জায়গা থেকে ৩০ পিক্সেল ডানে সরবে */
}

সহজ কথা: "আমি একটু সরে বসব, কিন্তু আমার সিটটা কেউ দখল করতে পারবে না।"

৩. পজিশন: অ্যাবসলুট (Absolute) – "স্বাধীন পাখি"

এটি নতুনদের জন্য সবচেয়ে বিভ্রান্তিকর, কিন্তু সবচেয়ে শক্তিশালী। তোমার Screenshot-9.jpg এবং Screenshot-8.jpg এটি খুব সুন্দরভাবে দেখিয়েছে।

• কনসেপ্ট: position: absolute দিলে এলিমেন্টটি তার স্বাভাবিক ফ্লো বা সিরিয়াল থেকে সম্পূর্ণ বের হয়ে যায়। সে অন্য এলিমেন্টদের তোয়াক্কা করে না।
• কার সাপেক্ষে নড়ে? এটি তার সবচেয়ে কাছের relative পজিশন দেওয়া প্যারেন্ট (Parent) এর সাপেক্ষে নিজেকে সেট করে। যদি কোনো প্যারেন্ট relative না হয়, তবে সে সোজা body বা পুরো পেজের সাপেক্ষে কাজ করবে।

নিয়ম (The Golden Rule):

যাকে সরাতে চাও তাকে দাও absolute, আর যার সাপেক্ষে সরাতে চাও (বাবা/Parent) তাকে অবশ্যই দিতে হবে relative।

কোড উদাহরণ (তোমার স্ক্রিনশট অনুযায়ী):

/* বাবা বা প্যারেন্ট */
.parent {
  position: relative; /* বাউন্ডারি ঠিক করে দেওয়া হলো */
  width: 500px;
  height: 300px;
}
 
/* সন্তান বা চাইল্ড */
.child {
  position: absolute; /* এখন সে বাবার বাউন্ডারির ভেতরেই থাকবে */
  top: 0;
  right: 0; /* বাবার একদম ডান-উপরের কোণায় চলে যাবে */
}

৪. একটি বাস্তব উদাহরণ: সার্চ বার (Search Bar)

তোমার Screenshot-10.png টি খুবই চমৎকার একটি উদাহরণ। আমরা প্রায়ই ইনপুট ফিল্ডের ভেতরে একটি আইকন বা বাটন দেখি। এটা কীভাবে করে?

1. Search-bar (পুরো বক্স): এটাকে দেওয়া হয় position: relative।
2. Input field: সাধারণ ভাবেই থাকে।
3. Search Button (আইকন): এটাকে দেওয়া হয় position: absolute এবং right: 0।

এতে করে বাটনটি ইনপুট ফিল্ডের উপরে একদম ডান পাশে গিয়ে বসে যায়।

৫. পজিশন: ফিক্সড (Fixed) – "জেদি এলিমেন্ট"

তোমার Screenshot-7.jpg এবং Screenshot-5.jpg দেখো। নীল বক্সটা স্ক্রিনের এক জায়গায় আটকে আছে।

• কনসেপ্ট: position: fixed মানে হলো এলিমেন্টটি ব্রাউজারের উইন্ডো বা Viewport এর সাপেক্ষে ফিক্সড হয়ে যাবে।
• আচরণ: তুমি মাউস দিয়ে যত হাজার পিক্সেলই স্ক্রল করো না কেন, সে তার জায়গা থেকে নড়বে না।
• ব্যবহার: নেভিগেশন বার (Navbar), বা 'Chat with us' বাটন তৈরির জন্য এটি ব্যবহার হয়।

স্ক্রিনশটের মাঝখানে আনার ট্রিকস (Screenshot-6.jpg): কোনো কিছুকে স্ক্রিনের ঠিক মাঝখানে ফিক্সড করতে চাইলে:

.fixed-element {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%; /* নিজেকে একদম সেন্টারে ব্যালেন্স করার জন্য */
}

৬. পজিশন: স্টিকি (Sticky) – "সুবিধাবাদী"

এটি relative এবং fixed এর একটি সংমিশ্রণ। তোমার Screenshot-7.jpg (Sticky Element) এ এটা দেখা যাচ্ছে।

• কনসেপ্ট: position: sticky দেওয়া এলিমেন্ট সাধারণ আচরণের মতোই থাকে। কিন্তু যখনই তুমি স্ক্রল করতে করতে তাকে অতিক্রম করতে যাবে, সে fixed হয়ে স্ক্রিনের সাথে আটকে যাবে।
• শর্ত: এটি কাজ করার জন্য অবশ্যই top, bottom, left বা right এর একটি ভ্যালু দিতে হবে (যেমন: top: 0)।

.sticky-element {
  position: sticky;
  top: 0; /* স্ক্রল করে যখনই টপে পৌঁছাবে, তখনই আটকে যাবে */
}

এক নজরে সারসংক্ষেপ (Cheat Sheet)

আশা করি এখন তোমার কাছে বিষয়টি পানির মতো পরিষ্কার! তোমার পরবর্তী কাজ হবে VS Code ওপেন করে parent (relative) এবং child (absolute) দিয়ে একটি বক্সের ভেতরে আরেকটি ছোট বক্সকে বিভিন্ন কোণায় (top-left, bottom-right) সরানোর চেষ্টা করা।

কোনো জায়গায় আটকে গেলে আমাকে জানাতে পারো!