CSS এর positioning কেনো বুঝবেন না? আসুন দেখি বোঝার চেষ্টা করি, বুঝি কিনা

CSS Layout - The position Property - একদম নিচে একটা ছবি দেওয়া আছে সেটা আগে দেখে আসবেন। ভূল হলে কমেনতে জানাবেন।

Position Property মূলত ৫ টি:

  • static
  • relative
  • fixed
  • absolute
  • sticky

নিচে প্রতিটি আলচনা করা হলো




1. Static Positioning

Static হচ্ছে ডিফল্ট পজিশনিং, যা html code লিখলেই যে আউটপুট আসে সেটাই। যখন কোনো ডিভ বা উপাদানকে position: static করা হয়, তখন তা তার নর্মাল ফ্লো অনুযায়ী পেজে প্রদর্শিত হয়।

html:

<div class="static">
    <h4>Static হলো default position 
        যেটা আপনি মার্জিন দিয়ে স্থান পরিবর্তন না করলে 
        ওয়েবসাইটের শুরুতেই বামপাশে থেকে যাবে
    </h4>
</div>

CSS:

.static {
    width: 500px;
    padding: 50px;
    color: #ff0000;
    line-height: 1.6;
    background: rgb(211, 211, 211);
    border-radius: 10px;
}

:point_right: এই কোডে কোনো position দেওয়া হয়নি, তাই এটি তার প্রাথমিক অবস্থানে থাকবে।




2. Relative Positioning

Relative পজিশনিংয়ের মাধ্যমে একটি ডিভকে তার সাধারণ অবস্থানের সাপেক্ষে স্থানান্তরিত করা সম্ভব। যখন একটি ডিভে position: relative দেওয়া হয়, তখন তার আসল পজিশন পরিবর্তিত হয় না, কিন্তু এর সাথে যদি top, right, bottom, left যোগ করা হয়, তবে সেটি বর্তমান অবস্থানের তুলনায় স্থান পরিবর্তন করে। এই ধরনের পজিশনিং সাধারনত অন্য element এর উপরে দেখানো জন্য ব্যবহৃত হয়।

অর্থাৎ position: relative; এর মানে হলো, এলিমেন্টটি তার স্বাভাবিক অবস্থান অর্থাৎ নিচের কোড অনুযায়ী (Static Position) থেকে নির্ধারিত দূরত্ব অনুযায়ী স্থানান্তরিত হবে।
এটি top, left, right, এবং bottom দিয়ে নিয়ন্ত্রণ করা যায়।

html

<div class="relative">
    <h4>এখানে দেখুন রিলেটিভ বক্স টা position: relative; করার পর 
         top: 150px; দেওয়ার কারনে উপর থেকে ১৫০ পিক্সেল নিচে চলে এসেছে এবং 
         left: 250px; দেওয়ার কারনে বাম থেকে নীল বক্স টা ২৫০পিক্সেল ডানে সরে এসেছে।
    </h4>
</div>

CSS:

.relative {
    width: 340px;
    background-color: rgb(0, 14, 92);
    color: rgb(255, 255, 255);
    padding: 20px;

    position: relative;
    top: 150px; /* উপর থেকে ১৫০ পিক্সেল নিচে সরে এসেছে */
    left: 250px; /* বাম থেকে ২৫০ পিক্সেল ডানে সরে এসেছে */
}



3. Absolute Positioning

Absolute পজিশনিং ব্যবহৃত হয় যখন কোনো উপাদানকে তার প্যারেন্ট div/section এর সাপেক্ষে স্থানান্তরিত করতে হয়। যখন একটি ডিভে position: absolute দেয়া হয়, তখন তা পেজে অন্যান্য এলিমেন্টের উপর অবস্থান নেয় এবং তার অবস্থান নির্ধারণ করতে তার parent div থেকে সরানোর জন্য top, bottom, left, right প্রপার্টি ব্যবহার করা হয়।

তবে position:absolute তখনই কাজ করে যখন যে বক্সের/ডিভের সাপেক্ষে নড়ানো হবে সেই বক্সের position:relative; করতে হবে এবং absolute কৃত বক্স টা এই relative কৃত বক্সের সাপেক্ষেই নড়াচড়া করবে।

চলুন, কোডের দিকে নজর দিই—এগুলো দেখলে আশা করি সব ক্লিয়ার হয়ে যাবে, ইংশা’আল্লাহ! :blush:

HTML:

<div class="main-box">
    <h3>Main Box এটা CSS কোড খেয়াল করলে দেখবেন এর position রিলেটিভ করা আছে।</h3>
    <div class="sub-box">
        <h4>এই বক্স টা দেখুন main-box এর আন্ডারে আছে, অর্থাৎ একে main-box কে পজিশন relative করে sub-box কে পজিশন:এবসলিউট করার পর এখানে right 0 এবং bottom 0 দেওয়া কারনে দেখুন পার্পল কালারের বক্স/sub-box টা একদম নিচে এবং একদম ডানদিকে লেগে গেছে। এটাই মূলত আসল খেলা। </h4>
    </div>
</div>

অর্থাৎ আপনি যেকোনো বক্সের সাপেক্ষেই যেকোনো বক্সকে ইচ্ছেমতো ভাসমান/নড়াচড়া করতে পারবেন। শুধুমাত্র: যে ডিভ/সেকশনের আন্ডারে সরাতে চান সেটাকে পজিশন:রিলেটিভ দিয়ে, যে ডিভ/সেকশন কে সরাতে চান তার পজিশনকে এবসলিউট করে দিলেই খেলা শেষ, এর পর ইচ্ছে মতো রংচং করে চোখ ধাঁধানো করুন হোভার দিন, যা মন চায়।

উপরের html code এবং নিচের css কোড খেয়াল করুন বা কোড ইডিটরে নিয়ে দেখুন।

CSS:

.main-box {
    width: 440px;
    height: 500px;
    background-color: rgb(0, 148, 20);
    color: rgb(255, 255, 255);
    padding: 20px;
    position: relative; /* Parent positioned */
    left: 850px;
    bottom: 250px;
    z-index: 1;
}

.sub-box {
    width: 140px;
    background-color: rgb(148, 0, 148);
    color: rgb(255, 255, 255);
    padding: 20px;
    position: absolute; /* Child positioned */
    right: 0px; /* ডান দিকে একদম সরে গেছে */
    bottom: 0px; /* নিচের দিকে একদম সরে গেছে */
    z-index: -1; /* নিচের লেয়ারে দেখাবে */
}

:point_right: এখানে main-box এর মধ্যে sub-box একদম ডানদিকে এবং নিচে সরে গেছে, কারণ position: absolute; দেওয়ার সময় এটি তার parent element main-box কে follow করে।




4. Fixed Positioning

Fixed পজিশনিং ব্যবহৃত হয় এমন উপাদানগুলির জন্য যা স্ক্রল করার পরেও এক জায়গায় স্থির থাকে। এটি পেজের সাপেক্ষে অবস্থান নেয় এবং স্ক্রল করার সময় উপাদানটি তার স্থান পরিবর্তন না করে দৃশ্যমান থাকে। সাধারণত, এটি হেডার বা ফ্লোটিং বাটন ইত্যাদি তৈরি করতে ব্যবহৃত হয়।

Example:

.fixed-div {
  position: fixed;  /* পেজে স্থির অবস্থান */
  top: 10px;         /* পেজের উপরের ১০px */
  right: 20px;       /* পেজের ডানদিকে ২০px */
}



5. Sticky Position

Sticky পজিশন হল এমন একটি পজিশনিং পদ্ধতি যেখানে উপাদানটি relative এবং fixed পজিশনের মিশ্রণে কাজ করে। এটি সাধারণত তার প্যারেন্ট বা কন্টেইনার উপাদানের সাপেক্ষে কাজ করে। Sticky পজিশনের একটি বিশেষ বৈশিষ্ট্য হল, এটি স্ক্রল করার সময় একটি নির্দিষ্ট সীমা পর্যন্ত “স্থির” থাকে এবং তারপর স্বাভাবিকভাবে স্ক্রল হয়।

কীভাবে Sticky কাজ করে:

  1. Sticky পজিশন শুধুমাত্র তার প্যারেন্ট কন্টেইনারের ভেতর কাজ করে।
  2. স্ক্রল করার সময় যখন নির্দিষ্ট সীমায় পৌঁছায়, তখন এটি ভিউপোর্টে আটকে যায়।
  3. প্যারেন্ট কন্টেইনার শেষ হলে এটি আর আটকে থাকে না।

উদাহরণ:


  <style>
    .container {
      height: 800px;
      background-color: lightgray;
    }

    .sticky-header {
      position: sticky; /* Sticky পজিশন নির্ধারণ */
      top: 0; /* ভিউপোর্টের শীর্ষ থেকে 0px দূরে থাকবে */
      background-color: orange;
      padding: 10px;
      font-size: 20px;
    }

    .content {
      height: 1200px; /* দীর্ঘ কন্টেন্টের জন্য উচ্চতা */
      background-color: white;
    }
  </style>

<body>
  <div class="container">
    <div class="sticky-header">I am a Sticky Header</div>
    <div class="content">
      Scroll down to see the sticky effect in action.  
    </div>
  </div>
</body>

কোড এর ব্যাখ্যা:

  1. .container: কন্টেইনারের উচ্চতা বেশি দেওয়া হয়েছে যেন স্ক্রল করার সুযোগ থাকে।
  2. .sticky-header: এই ডিভটি position: sticky এবং top: 0 এর মাধ্যমে ভিউপোর্টের শীর্ষে আটকে থাকবে।
  3. .content: কন্টেন্ট দীর্ঘ রাখা হয়েছে যেন sticky header এর কাজ বোঝা যায়।

Sticky Position এর বৈশিষ্ট্য:

  1. Sticky পজিশন কেবল তার প্যারেন্ট কন্টেইনারের ভেতর কাজ করে।
  2. স্ক্রল করলে এটি ভিউপোর্টে আটকে থাকে।
  3. এটি top, bottom, left, right প্রপার্টির মাধ্যমে সীমা নির্ধারণ করে।
  4. এটি সাধারণত টেবিল হেডার বা নির্দিষ্ট সেকশনকে ভিজিবল রাখতে ব্যবহার করা হয়।

ব্যবহারের ক্ষেত্র:

  • টেবিলের হেডার: লম্বা ডেটা টেবিলে হেডার সবসময় দৃশ্যমান রাখতে।
  • নেভিগেশন বার: স্ক্রল করার সময় নেভিগেশন বার স্থির রাখার জন্য।
  • কন্টেন্ট হেডিং: কোনো নির্দিষ্ট সেকশনের শিরোনাম স্থির রাখতে।



পজিশনিং করার জন্য যেসব প্রপার্টি ব্যবহৃত হয়:

  • position: static, relative, absolute, fixed, sticky
  • top, bottom, left, right: উপাদানটি কতটুকু স্থানান্তরিত হবে তা নির্ধারণ করতে ব্যবহৃত হয়
  • z-index: এর মাধ্যমে বিভিন্ন উপাদান একে অপরের উপর কীভাবে স্থিত হবে তা নিয়ন্ত্রণ করা যায়।

3 Likes

Moudud_Hoque vai awesome :heart:

1 Like

বাহহ! এতো দ্রুত পড়ে ফেললেন!

1 Like

জাযাকাল্লাহ ভাই সুন্দর আলোচনা