CSS এর হাতেখড়ি (পর্ব – ৫)

CSS Part 5

আগের পর্বে আমরা শিখেছি Display property। আজকে শিখবো position property — এটা দিয়ে আমরা একটা এলিমেন্টকে তার স্বাভাবিক জায়গা থেকে সরিয়ে ঠিক যেখানে চাই সেখানে বসাতে পারি। Sticky header, popup, badge — এসব বানাতে এটা লাগবেই।

position-এর পাঁচটা মান

প্রতিটার আচরণ আলাদা। একসাথে শুরুতে টেবিলে দেখে নিই, তারপর একটা একটা করে বিস্তারিত দেখবো:

Value সংক্ষেপে
static ডিফল্ট, স্বাভাবিক প্রবাহে থাকে
relative নিজের জায়গা থেকে সরে, কিন্তু জায়গা রিজার্ভ থাকে
absolute নিকটতম positioned প্যারেন্টের সাপেক্ষে বসে
fixed স্ক্রিনের সাপেক্ষে স্থির থাকে, স্ক্রল করলেও নড়ে না
sticky নির্দিষ্ট জায়গা পর্যন্ত static, তারপর fixed হয়ে যায়

static — ডিফল্ট

প্রতিটা HTML এলিমেন্ট ডিফল্টভাবে position: static। এর মানে এলিমেন্ট HTML-এর স্বাভাবিক প্রবাহ (normal flow) অনুযায়ী বসে — উপর থেকে নিচে, একটার পর একটা। top, left, right, bottom — এগুলো static এলিমেন্টে কোনো প্রভাব ফেলে না।

relative

এলিমেন্টটা তার নিজের স্বাভাবিক জায়গা থেকে top/left/right/bottom দিয়ে সরানো যায়, কিন্তু তার আসল জায়গাটা খালিই থাকে — অন্য এলিমেন্ট সেই জায়গা দখল করে না:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}
বক্স ১ (static)
বক্স ২ (relative, top:15px, left:15px)
বক্স ৩ (static)

লক্ষ করো — বক্স ২ সরে গেছে, কিন্তু বক্স ৩ যেন বক্স ২ এখনো তার আসল জায়গায় আছে ধরেই বসেছে। relative-এর আরেকটা বড় ব্যবহার আছে — এটা absolute চাইল্ডের জন্য একটা "reference point" তৈরি করে, যা এখনই দেখবো।

absolute

এলিমেন্টটা স্বাভাবিক প্রবাহ থেকে সম্পূর্ণ বেরিয়ে যায় (জায়গা রিজার্ভ থাকে না), আর নিকটতম positioned প্যারেন্টের সাপেক্ষে অবস্থান নেয়। "Positioned প্যারেন্ট" মানে যার position static ছাড়া অন্য কিছু (relative, absolute, fixed, sticky)।

.card {
  position: relative;   /* এই এলিমেন্ট এখন reference point */
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}
প্রোডাক্ট কার্ড নতুন

এখানে .badge-টা .card-এর উপরের-ডান কোণায় বসে গেছে — এটাই "badge" বা "new" ট্যাগ বানানোর সবচেয়ে কমন টেকনিক।

টিপস: absolute ব্যবহার করার সময় প্যারেন্টে position: relative দিতে ভুলে গেলে, এলিমেন্টটা পুরো পেজের (বা তার পরের positioned পূর্বপুরুষের) সাপেক্ষে বসে যাবে — যেটা প্রায়ই অপ্রত্যাশিত জায়গায় গিয়ে পড়ার কারণ হয়। এটা beginner-দের সবচেয়ে কমন CSS bug।

fixed

এলিমেন্টটা ব্রাউজার উইন্ডোর (viewport) সাপেক্ষে স্থির হয়ে যায় — পেজ স্ক্রল করলেও এটা নড়ে না, সবসময় একই জায়গায় থাকে:

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

এটা মূলত ব্যবহার হয়:

  • Floating WhatsApp/Chat বাটন
  • "Back to top" বাটন
  • Modal/popup-এর ব্যাকগ্রাউন্ড overlay

sticky

relative ও fixed-এর মিশ্রণ। এলিমেন্টটা সাধারণভাবে স্বাভাবিক প্রবাহে থাকে (static-এর মতো), কিন্তু স্ক্রল করতে করতে যখন একটা নির্দিষ্ট অবস্থানে (যেমন top: 0) পৌঁছায়, তখন সেটা fixed হয়ে আটকে যায়:

nav {
  position: sticky;
  top: 0;
}

এটা মূলত ব্যবহার হয় নেভিগেশন বার-এ — পেজ যতই স্ক্রল করো না কেন, মেনুটা সবসময় উপরে দেখা যায়। বেশিরভাগ আধুনিক ওয়েবসাইটের হেডার এভাবেই sticky করা থাকে।

টিপস: sticky কাজ করতে top (বা bottom) মান দেওয়া বাধ্যতামূলক — শুধু position: sticky লিখলেই হবে না।

সংক্ষেপে পার্থক্য মনে রাখার উপায়

Value নিজের জায়গা রিজার্ভ রাখে? সাপেক্ষে বসে
relative হ্যাঁ নিজের আসল জায়গা
absolute না নিকটতম positioned প্যারেন্ট
fixed না ব্রাউজার উইন্ডো
sticky হ্যাঁ (স্ক্রল না করা পর্যন্ত) প্রথমে normal flow, পরে viewport

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Position উদাহরণ</title>
  <style>
    nav {
      position: sticky;
      top: 0;
      background: white;
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }

    .product-card {
      position: relative;
      border: 1px solid #ddd;
      padding: 20px;
      margin: 20px 0;
    }

    .new-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: crimson;
      color: white;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
    }

    .whatsapp-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }
  </style>
</head>
<body>
  <nav>মেনু</nav>

  <div class="product-card">
    <span class="new-badge">নতুন</span>
    <h3>প্রোডাক্ট</h3>
  </div>

  <button class="whatsapp-btn">💬</button>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. একটা কার্ডে position: relative দাও, তার ভেতরে একটা badge position: absolute দিয়ে কোণায় বসাও
  2. একটা বাটনকে position: fixed দিয়ে স্ক্রিনের নিচে-ডানে আটকে দাও, পেজ স্ক্রল করে দেখো এটা নড়ে কিনা
  3. একটা nav-কে position: sticky; top: 0; দাও, লম্বা একটা পেজে স্ক্রল করে দেখো

পরের পর্বে যা থাকছে

পর্ব ৬-এ আমরা শিখবো Flexbox বেসিক — আধুনিক CSS layout-এর সবচেয়ে গুরুত্বপূর্ণ টুল, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম