CSS Z-Index: জেড-ইন্ডেক্স ব্যবহার করে এলিমেন্ট স্ট্যাকিং নিয়ন্ত্রণ

CSS z-index প্রপার্টি এলিমেন্টগুলিকে Z-অক্ষে (তৃতীয় মাত্রা) স্ট্যাক করার জন্য ব্যবহৃত হয় - অর্থাৎ কোন এলিমেন্ট অন্যের উপরে থাকবে তা নিয়ন্ত্রণ করে।

সিনট্যাক্স

z-index: auto;   /* ডিফল্ট */
z-index: -1;     /* নেগেটিভ = পीचे */
z-index: 9999;   /* বড় মান = সামনে */

গুরুত্বপূর্ণ শর্ত: Positioning আবশ্যক

z-index কাজ করার জন্য এলিমেন্টে position প্রপার্টি সেট থাকতে হবে: relative, absolute, fixed, বা sticky। Position ছাড়া z-index কাজ করে না (auto হিসেবে আচরণ করে)।

ব্যবহারিক উদাহরণ: গিনি পিগ স্ট্যাকিং

দুটি গিনি পিগ (Cuy) ইমেজ স্ট্যাক করা:

/* লেক (Lake) ইমেজ - বেস লেয়ার */
.lake { position: relative; z-index: 0; }

/* Cuy #1 - লেকের উপরে */
img.cuy.one { 
  position: absolute; 
  z-index: 1; 
}

/* Cuy #2 - কফির উপরে */
img.cuy.two { 
  position: absolute; 
  width: 160px; 
  padding: 100px; 
  z-index: 1; 
}

স্ট্যাকিং কন্টেক্সট (Stacking Context)

• z-index সिबলিং (sibling) এলিমেন্টের মধ্যে কাজ করে সবচেয়ে ভালো
• গভীরভাবে নেস্টেড (nested) এলিমেন্টে z-index অপ্রত্যাশিত আচরণ করতে পারে
• পেরেন্টের z-index চাইল্ডের z-index-কে সীমাবদ্ধ করতে পারে

সর্বোত্তম অনুশীলন

1. z-index ব্যবহার করার আগে position প্রপার্টি সেট করুন
2. সিবলিং এলিমেন্টগুলোর মধ্যে z-index ব্যবহার করুন
3. অনাবশ্যকভাবে অতিরিক্ত বড় মান (9999) এড়িয়ে যান - সংগত মান ব্যবহার করুন
4. নেস্টেড এলিমেন্টে সতর্ক থাকুন

উপসংহার

z-index লে আউটে গভীরতা (depth) যোগ করার শক্তিশালী টুল। Positioning এর সাথে মিলিয়ে সঠিকভাবে ব্যবহার করলে মডাল, ড্রপডাউন, টুলটিপ, পপ-আপ ইত্যাদি UI কম্পোনেন্ট তৈরি করা সহজ হয়।