সিএসএস জি-ইন্ডেক্স (CSS Z-index)

সি এস এস জি-ইন্ডেক্স একটি প্রোপার্টি যা একটি উপাদানের স্তরের (stacking order) নিয়ন্ত্রণ করে। এটি নির্ধারণ করে যে কোন উপাদানটি অন্য উপাদানগুলোর উপরে বা নিচে প্রদর্শিত হবে। সাধারণত, জি-ইন্ডেক্স ব্যবহার করে উপাদানের দৃশ্যমানতা (visibility) উন্নত করা হয় এবং জটিল লেয়ারড ডিজাইনে এটি অত্যন্ত কার্যকর।

জি-ইন্ডেক্স কিভাবে কাজ করে?

জি-ইন্ডেক্স একটি পূর্ণসংখ্যা (integer) মান গ্রহণ করে। এর মান যত বেশি হবে, উপাদানটি তত উপরে প্রদর্শিত হবে। ডিফল্ট জি-ইন্ডেক্স মান auto, যার ফলে উপাদানটির স্ট্যাকিং অর্ডার সাধারণ নিয়ম অনুসারে হয়।

.element {
  z-index: 1; /* উপাদানটির স্তর নির্ধারণ */
}

জি-ইন্ডেক্সের নিয়ম

1. পজিশনিং আবশ্যক: জি-ইন্ডেক্স শুধুমাত্র পজিশনড উপাদানে (যেমন: position: relative;, absolute;, fixed;, অথবা sticky;) প্রয়োগ হয়। যদি position না থাকে, তবে জি-ইন্ডেক্স কাজ করবে না।

   .box {
     position: relative; /* পজিশনিং যোগ করা হয়েছে */
     z-index: 10;
   }
   

2. উচ্চ জি-ইন্ডেক্স মান: উচ্চ মানের জি-ইন্ডেক্স থাকা উপাদান নিচু জি-ইন্ডেক্স থাকা উপাদানের উপরে প্রদর্শিত হয়।
3. স্ট্যাকিং প্রসঙ্গ (Stacking Context): একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি হয় যখন একটি উপাদানে position সহ নির্দিষ্ট শর্ত (যেমন: z-index, opacity, transform) থাকে। নতুন প্রসঙ্গের মধ্যে উপাদানগুলো তাদের নিজস্ব স্তরের নিয়ম অনুসরণ করে।

উদাহরণ

সাধারণ উদাহরণ

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
  .box1 {
    position: relative;
    z-index: 1;
    background: #3498db;
    width: 200px;
    height: 200px;
  }

  .box2 {
    position: relative;
    z-index: 2;
    background: #e74c3c;
    width: 150px;
    height: 150px;
    margin-top: -100px;
    margin-left: 50px;
  }
</style>

উপরের উদাহরণে Box 2-এর জি-ইন্ডেক্স বেশি, তাই এটি Box 1-এর উপরে প্রদর্শিত হবে।

নেগেটিভ জি-ইন্ডেক্স

জি-ইন্ডেক্সে নেগেটিভ মান দিয়ে উপাদানটিকে অন্যান্য উপাদানের নিচে পাঠানো যায়।

.background {
  position: relative;
  z-index: -1;
  background: #95a5a6;
  width: 100%;
  height: 100px;
}

এখানে z-index: -1; এর ফলে উপাদানটি অন্য সব উপাদানের নিচে প্রদর্শিত হবে।

স্ট্যাকিং প্রসঙ্গ তৈরি

একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করতে z-index সহ পজিশনিং প্রোপার্টি ব্যবহার করতে হয়। উদাহরণ:

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

<style>
  .parent {
    position: relative;
    z-index: 10;
  }

  .child1 {
    position: relative;
    z-index: 1;
    background: #3498db;
    width: 100px;
    height: 100px;
  }

  .child2 {
    position: relative;
    z-index: 2;
    background: #e74c3c;
    width: 100px;
    height: 100px;
    margin-top: -50px;
  }
</style>

উপরের কোডে, .parent একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে, যার ভেতরে Child 2 উপরে এবং Child 1 নিচে প্রদর্শিত হবে।

স্ট্যাকিং প্রসঙ্গ তৈরি হয় যে অবস্থায়

• পজিশনিং (Position): absolute, relative, fixed, বা sticky সহ z-index নির্ধারণ করা।
• opacity: 1.0-এর কম মানে স্ট্যাকিং প্রসঙ্গ তৈরি হয়।
• transform: যখন transform প্রোপার্টি যোগ করা হয়।
• filter: কোনো ধরনের ফিল্টার প্রোপার্টি ব্যবহার।
• perspective: প্যারস্পেকটিভ ব্যবহার।

সাধারণ সমস্যার সমাধান

1. জি-ইন্ডেক্স কাজ করছে না:
   • নিশ্চিত করুন যে উপাদানে position প্রোপার্টি আছে।
   • স্ট্যাকিং প্রসঙ্গ পরীক্ষা করুন।
2. একটি উপাদান অন্য উপাদানের নিচে লুকিয়ে আছে:
   • জি-ইন্ডেক্স বাড়িয়ে দিন।
   • প্যারেন্ট কন্টেইনারের স্ট্যাকিং প্রসঙ্গ বিবেচনা করুন।

জি-ইন্ডেক্স ব্যবহার করার টিপস

1. সাধারণ স্তরের স্ট্যাকিং: বেশি সংখ্যক উপাদানে উচ্চ জি-ইন্ডেক্স ব্যবহার করা এড়িয়ে চলুন। বরং, লেয়ারের স্তর পরিকল্পনা করে জি-ইন্ডেক্স নির্ধারণ করুন।
2. স্ট্যাকিং প্রসঙ্গ বুঝুন: জটিল লেআউট ডিজাইনে স্ট্যাকিং প্রসঙ্গ সম্পর্কে সচেতন থাকুন।
3. রেস্পন্সিভ ডিজাইনে খেয়াল রাখুন: ছোট ডিভাইসের স্ক্রিনে উচ্চ জি-ইন্ডেক্স ব্যবহার করলে উপাদানগুলো ওভারল্যাপ করতে পারে।

সারসংক্ষেপ

সি এস এস জি-ইন্ডেক্স একটি গুরুত্বপূর্ণ প্রোপার্টি, যা ওয়েব পেজের বিভিন্ন স্তরের উপাদানের প্রদর্শন নিয়ন্ত্রণ করে। এটি পজিশনড উপাদানের ক্ষেত্রে কার্যকর এবং স্ট্যাকিং প্রসঙ্গ তৈরি করে জটিল লেয়ারড লেআউট সহজ করে। সঠিকভাবে জি-ইন্ডেক্স ব্যবহারের মাধ্যমে একটি পেজের ভিজ্যুয়াল হায়ারার্কি উন্নত করা সম্ভব।