z-index ওভারল্যাপিং উপাদানগুলির সামনে থেকে পিছন স্ট্যাকিং অর্ডার নিয়ন্ত্রণ করে — উচ্চতর মানগুলি শীর্ষে অবস্থিত। তবে এটি শুধুমাত্র positioned উপাদানগুলিতে কাজ করে এবং এটি একটি stacking context মধ্যে কাজ করে, যা বেশিরভাগ z-index বিভ্রান্তির উৎস।
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index position: static এ উপেক্ষা করা হয় (ডিফল্ট) — এটি প্রয়োগ করার জন্য উপাদানটি অবশ্যই relative, absolute, fixed, বা sticky হতে হবে।
একটি stacking context একটি স্ব-সংবেদনশীল "স্তর"। z-index মানগুলি শুধুমাত্র একই প্রসঙ্গের মধ্যে প্রতিযোগিতা করে — একটি সন্তান কখনও তার অভিভাবকের stacking স্তর থেকে পালাতে পারে না, তার z-index যত বেশি হোক না কেন।
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }
.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/* because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
এটি ক্লাসিক "আমার z-index: 9999 মডেল এখনও কিছুর পিছনে আছে" বাগ — মডেলটি একটি নিম্ন-স্তরের অভিভাবকের মধ্যে আটকে আছে।
অনেক বৈশিষ্ট্য নীরবে একটি তৈরি করে, যা বংশধরদের আটকে রাখতে পারে:
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
ব্যবহারে, DOM এর শীর্ষে modals/tooltips রেন্ডার করুন (React portals) যাতে তারা কম-স্তরের অভিভাবকের মধ্যে আটকে না থাকে।
Stacking contexts সবচেয়ে বিভ্রান্তিকর z-index বাগ ব্যাখ্যা করে: একটি বিশাল z-index যা এখনও হারায় কারণ এর পূর্বপুরুষ একটি নিম্ন স্তরে আছে।
জেনে যে opacity, transform, এবং positioned-z-index সিদ্ধান্ত তৈরি করে — এবং যে সন্তানরা তাদের থেকে পালাতে পারে না — আপনাকে overlay/dropdown অর্ডারিং ডিবাগ করতে এবং আপনার DOM (portals) সঠিকভাবে কাঠামো করতে দেয়।