Z-Index Inspector একটি ওয়েবপেজে প্রতিটি এলিমেন্টের সম্পূর্ণ স্ট্যাকিং অর্ডার প্রকাশ করে। z-index ভ্যালু থাকা প্রতিটি এলিমেন্ট হাইলাইট করা হয় এবং পেজের ওপর সরাসরি লেবেলযুক্ত করা হয়। একটি সর্টেড (sorted) লেয়ার ম্যাপ প্যানেল ওপর থেকে নিচ পর্যন্ত সব z-index লেয়ার দেখায়। এটি position, transform, opacity এবং অন্যান্য CSS প্রোপার্টি দ্বারা তৈরি স্ট্যাকিং কনটেক্সটগুলো শনাক্ত করে — যা অবশেষে z-index ডিবাগিংকে ভিজ্যুয়াল এবং সহজবোধ্য করে তোলে।
z-index বাগগুলো CSS-এর মধ্যে অন্যতম বিরক্তিকর সমস্যা। সবকিছু ওপরে থাকা উচিত এমন একটি মোডাল হঠাৎ একটি সাইডবারের পিছনে লুকিয়ে থাকে। একটি ড্রপডাউন মেনু পরের সেকশনের আড়ালে চলে যায়। একটি প্যারেন্ট এলিমেন্ট অপ্রত্যাশিত স্ট্যাকিং কনটেক্সট তৈরি করার কারণে একটি টুলটিপ অদৃশ্য হয়ে যায়। এর মূল কারণ সাধারণত স্ট্যাকিং কনটেক্সট কীভাবে কাজ করে সে সম্পর্কে ভুল ধারণা — আর ব্রাউজারের DevTools এগুলো ভিজুয়ালাইজ করতে কোনো সাহায্যই করে না। Z-Index Inspector এই অদৃশ্য বিষয়গুলোকে দৃশ্যমান করে তোলে। নির্দিষ্ট z-index থাকা প্রতিটি এলিমেন্ট একটি রঙিন ওভারলে এবং তার ভ্যালু দেখানোর জন্য একটি লেবেল পায়। একটি সর্টেড লেয়ার ম্যাপ প্যানেল সর্বনিম্ন থেকে সর্বোচ্চ পর্যন্ত সব z-index ভ্যালুর তালিকা দেখায় এবং কোন CSS ক্লাস বা এলিমেন্টের জন্য কোন ভ্যালু ব্যবহার করা হয়েছে তাও দেখায়। সবচেয়ে গুরুত্বপূর্ণ হলো, টুলটি স্ট্যাকিং কনটেক্সট বাউন্ডারিগুলো শনাক্ত করে — অর্থাৎ সেই এলিমেন্টগুলো যেগুলো position + z-index, transform, opacity < 1, filter, will-change বা isolation-এর মাধ্যমে নতুন স্ট্যাকিং কনটেক্সট তৈরি করে। কোন অ্যানসেস্টর (ancestor) স্ট্যাকিং কনটেক্সটটি তৈরি করছে তা বুঝতে পারা সাধারণত z-index বাগ ফিক্স করার মূল চাবিকাঠি।
z-index ভ্যালু থাকা প্রতিটি এলিমেন্ট একটি আধা-স্বচ্ছ রঙিন ওভারলে এবং তার z-index নম্বর দেখানোর জন্য একটি লেবেল ব্যাজ পায়। উচ্চতর z-index ভ্যালুর জন্য গাঢ় রঙ (লাল শেড) এবং নিম্নতর ভ্যালুর জন্য হালকা রঙ (নীল শেড) ব্যবহার করা হয়। এই ভিজ্যুয়াল লেয়ারিং স্ট্যাকিং অর্ডারকে তাৎক্ষণিকভাবে সহজবোধ্য করে তোলে।
একটি সাইড প্যানেল পেজে পাওয়া সমস্ত z-index ভ্যালুর তালিকা দেখায়, যা সর্বোচ্চ থেকে সর্বনিম্ন ক্রমানুসারে সাজানো থাকে। প্রতিটি এন্ট্রিতে z-index ভ্যালু, CSS সিলেক্টর বা ক্লাসের নাম এবং পজিশন প্রোপার্টি দেখা যায়। পেজের সংশ্লিষ্ট এলিমেন্টটিকে হাইলাইট করতে যেকোনো এন্ট্রিতে ক্লিক করুন।
পেজের প্রতিটি স্ট্যাকিং কনটেক্সট বাউন্ডারি এবং কোন CSS প্রোপার্টি এটি তৈরি করছে তা শনাক্ত করে — যেমন position: relative/absolute-এর সাথে z-index থাকে, transform, opacity < 1, filter, will-change, isolation: isolate বা contain: layout। এগুলো আলাদাভাবে তালিকাভুক্ত করা হয় যাতে আপনি সহজেই বুঝতে পারেন কেন কোনো z-index ভ্যালু প্রত্যাশা অনুযায়ী কাজ করছে না।
পেজের সংশ্লিষ্ট এলিমেন্টটিকে হাইলাইট করতে এবং সেখানে স্ক্রল করতে প্যানেলের যেকোনো লেয়ারে ক্লিক করুন। অথবা লেয়ার ম্যাপ প্যানেলে অবস্থান শনাক্ত করতে পেজের যেকোনো হাইলাইট করা এলিমেন্টে ক্লিক করুন। আপনার পছন্দমতো যেকোনো দিক থেকে স্ট্যাকিং অর্ডারটি পর্যবেক্ষণ করুন।
প্রতিটি লেয়ার এন্ট্রি এলিমেন্টের CSS পজিশন ভ্যালু (static, relative, absolute, fixed, sticky) দেখায়, কারণ z-index শুধুমাত্র পজিশন্ড এলিমেন্টের ক্ষেত্রে প্রযোজ্য। এমন কেসগুলো সহজেই শনাক্ত করুন যেখানে z-index সেট করা আছে কিন্তু পজিশন 'static' — এটি একটি সাধারণ বাগ যেখানে z-index কাজ করে না।
যেকোনো নির্বাচিত এলিমেন্টের জন্য রুট পর্যন্ত সমস্ত অ্যানসেস্টর স্ট্যাকিং কনটেক্সটের সম্পূর্ণ চেইনটি দেখুন। সুনির্দিষ্টভাবে বুঝতে পারবেন কোন অ্যানসেস্টরের স্ট্যাকিং কনটেক্সট এলিমেন্টের z-index-এর আওতাকে সীমাবদ্ধ করছে — যা বেশিরভাগ z-index ডিবাগিংয়ের জন্য অত্যন্ত প্রয়োজনীয় তথ্য।
z-index: 9999 থাকা একটি মোডাল z-index: 10 থাকা একটি সাইডবারের পিছনে লুকিয়ে আছে। কিন্তু কেন? Z-Index Inspector দেখায় যে মোডালের প্যারেন্টের position: relative এবং এটি z-index: 1 দিয়ে একটি স্ট্যাকিং কনটেক্সট তৈরি করেছে, অন্যদিকে সাইডবারের প্যারেন্টের z-index: 2। মোডালটি কখনোই তার প্যারেন্টের কনটেক্সট থেকে বাইরে আসতে পারবে না।
একটি ড্রপডাউন মেনু খোলার সময় পরের সেকশনের আড়ালে চলে যায়। ইন্সপেক্টর প্রকাশ করে যে মেনুর কন্টেইনারে overflow: hidden আছে (যা একটি স্ট্যাকিং কনটেক্সট তৈরি করে) অথবা পরের সেকশনে উচ্চতর z-index আছে। ভিজ্যুয়াল লেয়ার হাইলাইটিং এই ওভারল্যাপকে স্পষ্ট করে তোলে।
সময়ের সাথে সাথে z-index ভ্যালুগুলো বাড়তে থাকে: ১০, ১০০, ৯৯৯, ৯৯৯৯, ৯৯৯৯৯। লেয়ার ম্যাপ সমস্ত ভ্যালুকে সর্টেড অবস্থায় দেখায়, যা প্রকৃত প্রয়োজনীয় রেঞ্জটি শনাক্ত করা এবং একটি পরিষ্কার স্কেলে (যেমন ১, ২, ৩, ১০, ১০০) সেগুলোকে কমিয়ে আনা সহজ করে।
চ্যাট উইজেট, কুকি ব্যানার বা অ্যানালিটিক্স ওভারলেগুলোতে অনেক সময় উচ্চতর z-index ভ্যালু ব্যবহার করা হয়। Z-Index Inspector সুনির্দিষ্টভাবে দেখায় তারা কোন ভ্যালু ব্যবহার করছে, যা আপনাকে আপনার নিজস্ব z-index ভ্যালুগুলো সংঘাত এড়িয়ে সঠিকভাবে সেট করতে সহায়তা করে।
অপ্রয়োজনীয় স্ট্যাকিং কনটেক্সটগুলো পরীক্ষা করতে পেজের সমস্ত স্ট্যাকিং কনটেক্সট রিভিউ করুন। ভিজ্যুয়াল ইফেক্টের জন্য ব্যবহৃত transform, filter বা opacity অনিচ্ছাকৃতভাবে এমন স্ট্যাকিং কনটেক্সট তৈরি করতে পারে যা অন্য কোথাও z-index সমস্যা সৃষ্টি করে। কনটেক্সট লিস্ট এই সবগুলোকে দৃশ্যমান করে তোলে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Z-Index Inspector আইকনে ক্লিক করুন। টুলটি পেজটি স্ক্যান করবে এবং z-index ভ্যালু থাকা প্রতিটি এলিমেন্ট ও স্ট্যাকিং কনটেক্সট বাউন্ডারি শনাক্ত করবে।
z-index ভ্যালু থাকা এলিমেন্টগুলো সরাসরি পেজে রঙিন ওভারলে হিসেবে দেখা যাবে এবং তাদের z-index নম্বরসহ লেবেল থাকবে। উচ্চতর ভ্যালুগুলো গাঢ় রঙে এবং নিম্নতর ভ্যালুগুলো হালকা রঙে প্রদর্শিত হয়।
সর্বোচ্চ থেকে সর্বনিম্ন হিসেবে সাজানো সমস্ত z-index লেয়ার দেখতে সাইড প্যানেলটি ওপেন করুন। প্রতিটি এন্ট্রিতে ভ্যালু, সিলেক্টর এবং পজিশন প্রোপার্টি দেখা যায়। পেজের এলিমেন্টটিকে হাইলাইট করতে যেকোনো এন্ট্রিতে ক্লিক করুন।
প্যানেলের "Stacking Contexts" সেকশনটি প্রতিটি এলিমেন্টের তালিকা দেখায় যা নতুন স্ট্যাকিং কনটেক্সট তৈরি করে এবং এজন্য দায়ী CSS প্রোপার্টির নামও থাকে। z-index সংক্রান্ত সমস্যা বোঝার জন্য এটিই সাধারণত সবচেয়ে গুরুত্বপূর্ণ তথ্য।
কোনো এলিমেন্টের অ্যানসেস্টর স্ট্যাকিং কনটেক্সট চেইন দেখতে সেটিতে ক্লিক করুন — দেখুন কোন প্যারেন্ট কনটেক্সটগুলো এর রেন্ডারিং অর্ডারকে প্রভাবিত করছে। কোন বাউন্ডারি স্ট্যাকিং সমস্যা তৈরি করছে তা খুঁজে বের করতে চেইনটি ওপরের দিকে অনুসরণ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
