মূলঃ How to use the position property in CSS to align elements, লেখকঃ Cem Eygi

ওয়েব ডেভেলপমেন্টে CSS ব্যবহার করে বিভিন্ন এলিমেন্ট অ্যালাইন করা যতটা সহজ মনে হয় আসলে ততটা সহজ নয়। আপনার প্রোজেক্ট যত বড় হতে থাকবে তত দ্রুত জটিল হতে থাকবে এবং CSS কিভাবে বিভিন্ন এলিমেন্টকে অ্যালাইন করে সে ব্যাপারে যদি আপনার পরষ্কার ধারণা না থাকে, তাহলে আপনি অ্যালাইনমেন্ট সংক্রান্ত সমস্যাগুলি সমাধানেও ব্যার্থ হবেন।

শুধুমাত্র CSS ব্যবহার করে বিভিন্ন এলিমেন্টকে পজিশন করার একাধিক পদ্ধতি আছে। CSS float, display, এবং position প্রপার্টি হল কিছু কমন পদ্ধতি।

এই আর্টিকেলে আমি CSS ব্যবহার করে বিভিন্ন এলিমেন্ট অ্যালাইন করার সবথেকে বিভ্রান্তিকর পদ্ধতিগুলির একটি নিয়ে আলোচনা করবো। সেটি হল position প্রপার্টি।  এখানে CSS display প্রপার্টি নিয়েও আমার একটি টিউটোরিয়াল আছে।

আপনি যদি পড়ার তুলানায় ভিডিও দেখে শিখতে বেশি স্বাচ্ছন্দ্য বোধ করেন তাহলে এই টিউটোরিয়ালের ভিডিও সংস্করণটি দেখতে পারেনঃ

তাহলে শুরু করা যাক...

CSS Position এবং Helper Properties

Position প্রপার্টির মূলত ৫টি সম্ভাব্য মান রয়েছেঃ

position: static | relative | absolute | fixed | sticky

এবং একটি এলিমেন্টের স্থানাঙ্ক (coordinates) সেট করার জন্য আরও কিছু প্রপার্টি আছে (আমি এগুলিকে "helper properties" বলি)ঃ

top | right | bottom | left এবং z-index

উল্লেখ্যঃ ডেক্লেয়ারড প্রপার্টি ছাড়া বা position: static এর সাথে, helper properties কাজ করে না।

Z-index কি?

যে কোন এলিমেন্টের দুটি মাত্রা বা dimension হল এর height এবং width (x, y)। এবং এর তৃতীয় মাত্রা বা dimension হল Z। ওয়েবপেজ এ কোন এলিমেন্টের z-index এর মান যত বৃদ্ধি পায়, এলিমেন্টটি অন্যান্য এলিমেন্টের থেকে তত সামনের দিকে এগিয়ে আসে।

1-Dc7075K8xmYZQAqn6BaJPg
z-index এর ক্রমানুসারে পেছন থেকে সামনে পর্যন্ত এলিমেন্টগুলি সাজানো থাকে

Z-index এর ব্যবহার সম্পর্কে আরও বিস্তারিত জানতে আমার চ্যানেলের এই ভিডিওটি দেখতে পারেনঃ

এবার তাহলে position প্রপার্টি এর মান সম্পর্কে আলোচনা করা যাক...

১. Static

position: static হল ডিফল্ট মান। আমরা এটি ডিক্লেয়ার করি বা না করি, ওয়েবপেজে এলিমেন্টগুলি একটি সাধারণ ক্রমানুসারে সাজানো থাকে। একটি উদাহরণ দেওয়া হলঃ

প্রথমে, আমরা আমাদের HTML স্ট্রাকচার ডিফাইন করবঃ

<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>

এরপর আমরা দুটি বক্স তৈরি করে তাদের width, height, এবং position ডিফাইন করবঃ

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}
1-atA27-7dzI4wKkg_HfAtLw
position: static থাকা বা থাকার কোন প্রভাব নেই

ছবিতে আমরা যেমনটা দেখতে পাচ্ছি, position: static ডিফাইন করা বা না করা একই কথা। বক্সগুলি ডকুমেন্টের সাধারণ ক্রম অনুযায়ী অবস্থান করছে।

২. Relative

position: relative হল একটি এলিমেন্টের সাধারণ অবস্থানের সাথে আপেক্ষিক একটি নতুন অবস্থান।

position: relative থেকে শুরু করে অন্য যে কোন non-static মানের সাথে আমরা helper properties ব্যবহার করতে পারি।

চলুন কমলা বাক্সটিকে নীল বাক্সটির পাশে অবস্থান করাই।

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}
1-noqTpZ-EBTftlKdFi48Iiw
কমলা বক্সটি তার সাধারণ পজিশনের থেকে 100px ডানে এবং 100px নিচে অবস্থান করছে
উল্লেখ্যঃ position: relative এর ব্যবহার সংশ্লিষ্ট এলিমেন্টটির অবস্থানের উপরে কোন প্রভাব ফেলে না।

৩. Absolute

position: relative এর ক্ষেত্রে, এলিমেন্টটিকে তার সাধারণ অবস্থানের সাথে আপেক্ষিক ভাবে অবস্থান করা হয়। কিন্তু position: absolute এর ক্ষেত্রে, এলিমেন্টটিকে তার প্যারেন্ট এলিমেন্টের অবস্থানের সাথে আপেক্ষিকভাবে অবস্থান করানো হয়।

position: absolute এর সাথে সংশ্লিষ্ট এলিমেন্টকে, ডকুমেন্টের স্বাভাবিক ক্রম থেকে সরিয়ে ফেলা হয়। এটিকে স্বয়ংক্রিয়ভাবে তার প্যারেন্ট এলিমেন্ট এর starting point (top-left corner) এ অবস্থান করানো হয়। এলিমেন্টটির যদি কোন প্যারেন্ট এলিমেন্ট না থাকে তাহলে document <html> কে এর প্যারেন্ট হিসেবে ধরা হবে।

প্যারেন্ট এলিমেন্ট হিসেবে একটি কন্টেইনার যুক্ত করিঃ

<body>
  <div class="container">
    <div class="box-orange"></div>
    <div class="box-blue"></div>
  </div>
</body>
.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}
1-C15mDxOdtFLkXLcFaVRYBQ
position: absolute সংশ্লিষ্ট এলিমেন্টকে তার প্যারেন্ট এলিমেন্টের শুরুতে নিয়ে যায়

এখন দেখে মনে হচ্ছে নীল বক্সটি হারিয়ে গেছে কিন্তু আসলে তা ঠিক নয়। নীল বক্সটি এমন আচরণ করে যেন কমলা বক্সটিকে সরিয়ে ফেলা হয়েছে, তাই এটি কমলা বক্স এর যায়গা নিয়ে নেয়।

কমলা বক্সটিকে 5px সরিয়ে ফেলিঃ

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}
1-ss6uEQz9Bbdrdst8kNiHqQ
এবার নীল বক্সটি দেখা যাচ্ছে

position: absolute এর সংশ্লিষ্ট এলিমেন্টের প্যারেন্ট এলিমেন্ট এর যদি non-static position থাকে তাহলে সংশ্লিষ্ট এলিমেন্টটি তার প্যারেন্ট এলিমেন্টের অবস্থানের সাথে আপেক্ষিক ভাবে অবস্থান করবে। অন্যথায়, সংশ্লিষ্ট এলিমেন্টটি ইনিশিয়াল <html> এর সাথে আপেক্ষিকভাবে অবস্থান করবে।

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}
1-AEX5fn8t0MJZCo4Lx52Uaw

৪. Fixed

position: absolute এর মতই, position: fixed এর সাথে সংশ্লিষ্ট এলিমেন্টকে ডোকুমেন্টের সাধারণ ক্রম থেকে সরিয়ে ফেলা হয়। এদের মধ্যে পার্থক্যগুলি হলঃ

  • position: fixed এলিমেন্টগুলি <html> ডকুমেন্টের সাথে আপেক্ষিকভাবে অবস্থান করে।
  • এদের উপরে পেজ স্ক্রল করার কোন প্রভাব থাকে না।
.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: fixed;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}

এই উদাহরণে আমি কমলা বক্সটিকে position: fixed করেছি এবং এবার এলিমেন্টটি <html> এর থেকে 5px ডানে অবস্থান করছে, এর প্যারেন্ট থেকে নয়।

যেমনটা আমরা দেখতে পাচ্ছি, ফিক্সড এলিমেন্টটির উপরে পেজ স্ক্রলের কোন প্রভাব নেই। এটি তার প্যারেন্টের সাথে আর অবস্থান করছে না।

৫. Sticky

position: sticky হল position: relative এবং position: fixed এর সংমিশ্রণ।

এটি পেজের একটি নির্দিষ্ট পয়েন্ট পর্যন্ত position: relative এর মতো আচরণ করে এবং তারপরে position: fixed এর মতো। position: sticky বুঝার সবথেকে ভাল উপায় হল একটি উদাহরণঃ

উল্লেখ্যঃ Internet Explorer এবং অন্যান্য ব্রাউজারগুলির পুরোনো ভার্শনগুলি position: sticky সমর্থন করে না। caniuse.com এ আপনি দেখতে পারবেন কোন কোন ব্রাউজার এটি সমর্থন করে।

image

CSS Position Property বুঝার সব থেকে ভাল উপায় হল অনুশীলন করা। যতক্ষণ না আপনি ভালমত এটি বুঝতে পারছেন, ততক্ষণ এটি ব্যবহার করে কোড করতে থাকুন।

ওয়েব ডেভেলপমেন্ট সম্পর্কে আরও জানতে আমার ইউটিউব চ্যানেলটি সাবস্ক্রাইব করতে পারেন।

পড়ার জন্য ধন্যবাদ!