کیا آپ نے کبھی اپنے CSS میں کسی عنصر پر z-index: 99999 سیٹ کیا ہے، اور یہ دوسرے عناصر کے اوپر نہیں آتا؟ ایک قدر جو بڑی ہے اسے آسانی سے اس عنصر کو کسی بھی چیز کے اوپر بصری طور پر رکھنا چاہئے، یہ فرض کرتے ہوئے کہ تمام مختلف عناصر یا تو کم قیمت پر سیٹ ہیں یا بالکل سیٹ نہیں ہیں۔ ویب صفحہ کو عام طور پر دو جہتی جگہ میں دکھایا جاتا ہے۔ تاہم، مخصوص CSS خصوصیات کو لاگو کرکے، گہرائی کو پہنچانے کے لیے ایک خیالی z-axis طیارہ متعارف کرایا جاتا ہے۔ یہ طیارہ اسکرین پر کھڑا ہے، اور اس سے صارف عناصر کی ترتیب کو سمجھتا ہے، ایک دوسرے کے اوپر۔ خیالی z-axis کے پیچھے خیال، اسٹیک شدہ عناصر کے بارے میں صارف کا تصور، یہ ہے کہ CSS کی خصوصیات جو اسے تخلیق کرتی ہیں وہ یکجا ہو کر تشکیل دیتی ہیں جسے ہم اسٹیکنگ سیاق و سباق کہتے ہیں۔ ہم اس بارے میں بات کرنے جا رہے ہیں کہ ویب پیج پر عناصر کو کس طرح "اسٹیک" کیا جاتا ہے، اسٹیکنگ آرڈر کو کیا کنٹرول کرتا ہے، اور ضرورت پڑنے پر عناصر کو "ان اسٹیک" کرنے کے لیے عملی نقطہ نظر۔ اسٹیکنگ سیاق و سباق کے بارے میں اپنے ویب پیج کو ڈیسک کے طور پر تصور کریں۔ جیسا کہ آپ HTML عناصر کو شامل کرتے ہیں، آپ میز پر ایک کے بعد ایک کاغذ کے ٹکڑے بچھا رہے ہوتے ہیں۔ رکھا ہوا کاغذ کا آخری ٹکڑا حال ہی میں شامل کیے گئے HTML عنصر کے برابر ہے، اور یہ اس سے پہلے رکھے گئے تمام کاغذات کے اوپر بیٹھتا ہے۔ یہ عام دستاویز کا بہاؤ ہے، یہاں تک کہ گھریلو عناصر کے لیے بھی۔ ڈیسک بذات خود روٹ اسٹیکنگ سیاق و سباق کی نمائندگی کرتا ہے، جو عنصر کے ذریعہ تشکیل دیا گیا ہے، جس میں دیگر تمام فولڈرز شامل ہیں۔ اب، مخصوص سی ایس ایس خصوصیات کھیل میں آتی ہیں۔ پراپرٹیز جیسے پوزیشن (زیڈ انڈیکس کے ساتھ)، دھندلاپن، تبدیلی، اور مشتمل) ایک فولڈر کی طرح کام کرتی ہیں۔ یہ فولڈر ایک عنصر اور اس کے تمام بچوں کو لیتا ہے، انہیں مرکزی اسٹیک سے نکالتا ہے، اور انہیں الگ ذیلی اسٹیک میں گروپ کرتا ہے، جس کو ہم اسٹیکنگ سیاق و سباق کہتے ہیں۔ پوزیشن والے عناصر کے لیے، ایسا اس وقت ہوتا ہے جب ہم آٹو کے علاوہ زیڈ انڈیکس ویلیو کا اعلان کرتے ہیں۔ اوپیسٹی، ٹرانسفارم اور فلٹر جیسی خصوصیات کے لیے، مخصوص اقدار کے لاگو ہونے پر اسٹیکنگ سیاق و سباق خود بخود بن جاتا ہے۔
اس کو سمجھنے کی کوشش کریں: ایک بار جب کاغذ کا ایک ٹکڑا (یعنی چائلڈ ایلیمنٹ) کسی فولڈر کے اندر ہو جائے (یعنی والدین کا اسٹیکنگ سیاق و سباق)، تو یہ کبھی بھی اس فولڈر سے باہر نہیں نکل سکتا یا کسی دوسرے فولڈر میں کاغذات کے درمیان نہیں رکھا جا سکتا۔ اس کا z-index اب صرف اس کے اپنے فولڈر میں ہی متعلقہ ہے۔
نیچے دی گئی مثال میں، پیپر بی اب فولڈر بی کے اسٹیکنگ سیاق و سباق کے اندر ہے، اور فولڈر میں موجود دیگر کاغذات کے ساتھ ہی آرڈر کیا جا سکتا ہے۔
تصور کریں، اگر آپ چاہیں گے، کہ آپ کی میز پر دو فولڈر ہیں:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
آئیے مارک اپ کو تھوڑا سا اپ ڈیٹ کرتے ہیں۔ فولڈر اے کے اندر ایک خاص صفحہ ہے، زیڈ انڈیکس: 9999۔ فولڈر بی کے اندر ایک سادہ صفحہ ہے، زیڈ انڈیکس: 5۔
خصوصی صفحہ { زیڈ انڈیکس: 9999; } .plain-page { z-index: 5; }
کون سا صفحہ سب سے اوپر ہے؟ یہ فولڈر B میں .plain-page ہے۔ براؤزر چائلڈ پیپرز کو نظر انداز کرتا ہے اور پہلے دو فولڈرز کو اسٹیک کرتا ہے۔ یہ فولڈر B (z-index: 2) دیکھتا ہے اور اسے فولڈر A (z-index: 1) کے اوپر رکھتا ہے کیونکہ ہم جانتے ہیں کہ دو ایک سے بڑے ہیں۔ دریں اثنا، .special-page کو z-index: 9999 پر سیٹ کیا گیا ہے، اگرچہ اس کا z-index اعلی ترین ممکنہ قدر پر سیٹ کیا گیا ہے۔ اسٹیکنگ سیاق و سباق کو بھی نیسٹ کیا جا سکتا ہے (فولڈرز کے اندر فولڈرز)، ایک "فیملی ٹری" بناتا ہے۔ ایک ہی اصول لاگو ہوتا ہے: ایک بچہ اپنے والدین کے فولڈر سے کبھی نہیں بچ سکتا۔ اب جب کہ آپ کو معلوم ہو گیا ہے کہ اسٹیکنگ سیاق و سباق ان فولڈرز کی طرح برتاؤ کرتے ہیں جو تہوں کو گروپ کرتے ہیں اور پرتوں کو دوبارہ ترتیب دیتے ہیں، یہ پوچھنے کے قابل ہے: کچھ خاص خصوصیات - جیسے ٹرانسفارم اور دھندلاپن - نئے اسٹیکنگ سیاق و سباق کیوں تخلیق کرتے ہیں؟ بات یہ ہے: یہ خصوصیات اسٹیکنگ سیاق و سباق پیدا نہیں کرتی ہیں کیونکہ وہ کیسے نظر آتے ہیں۔ وہ ایسا کرتے ہیں کیونکہ براؤزر ہڈ کے نیچے کیسے کام کرتا ہے۔ جب آپ تبدیلی، دھندلاپن، فلٹر، یا نقطہ نظر کا اطلاق کرتے ہیں، تو آپ براؤزر سے کہہ رہے ہوتے ہیں، "ارے، یہ عنصر حرکت، گھماؤ، یا دھندلا ہو سکتا ہے، لہذا تیار رہیں!"
جب آپ ان خصوصیات کو استعمال کرتے ہیں، تو براؤزر رینڈرنگ کو زیادہ مؤثر طریقے سے منظم کرنے کے لیے ایک نیا اسٹیکنگ سیاق و سباق بناتا ہے۔ یہ براؤزر کو اینیمیشنز، تبدیلیوں اور بصری اثرات کو آزادانہ طور پر ہینڈل کرنے کی اجازت دیتا ہے، جس سے دوبارہ گنتی کی ضرورت کم ہو جاتی ہے کہ یہ عناصر باقی صفحے کے ساتھ کیسے تعامل کرتے ہیں۔ اس کے بارے میں براؤزر کے کہنے کی طرح سوچیں، "میں اس فولڈر کو الگ سے ہینڈل کروں گا تاکہ جب بھی اس کے اندر کوئی چیز بدل جائے تو مجھے پوری ڈیسک کو تبدیل کرنے کی ضرورت نہیں ہے۔" لیکن ہےایک ضمنی اثر. ایک بار جب براؤزر کسی عنصر کو اپنی پرت میں لے جاتا ہے، تو اسے اس کے اندر موجود ہر چیز کو "چپٹا" کرنا چاہیے، جس سے ایک نیا اسٹیکنگ سیاق و سباق پیدا ہوتا ہے۔ یہ ایسا ہی ہے جیسے کسی فولڈر کو ڈیسک سے الگ سے ہینڈل کرنے کے لیے۔ اس فولڈر کے اندر موجود ہر چیز کو گروپ کیا جاتا ہے، اور براؤزر اب اسے ایک اکائی کے طور پر دیکھتا ہے جب یہ فیصلہ کیا جاتا ہے کہ کس چیز کے اوپر کیا ہے۔ لہٰذا اگرچہ تبدیلی اور دھندلاپن کی خصوصیات عناصر کے بصری طور پر ڈھیر لگانے کے طریقے کو متاثر کرتی نظر نہیں آتیں، وہ کرتے ہیں، اور یہ کارکردگی کی اصلاح کے لیے ہے۔ کئی دیگر سی ایس ایس خصوصیات بھی اسی طرح کی وجوہات کی بناء پر اسٹیکنگ سیاق و سباق بنا سکتی ہیں۔ اگر آپ گہری کھودنا چاہتے ہیں تو MDN ایک مکمل فہرست فراہم کرتا ہے۔ بہت سے ایسے ہیں، جو صرف یہ بتاتے ہیں کہ نادانستہ طور پر اسٹیکنگ سیاق و سباق کو جانے بغیر اسے بنانا کتنا آسان ہے۔ "ان اسٹیکنگ" کا مسئلہ اسٹیکنگ کے مسائل کئی وجوہات کی بناء پر پیدا ہو سکتے ہیں، لیکن کچھ دوسروں کے مقابلے میں زیادہ عام ہیں۔ موڈل اجزاء ایک کلاسک پیٹرن ہیں کیونکہ ان کے لیے جزو کو دوسرے تمام عناصر سے اوپر والی پرت پر "کھولنے" کے لیے ٹوگل کرنے کی ضرورت ہوتی ہے، پھر جب یہ "بند" ہو تو اسے اوپر کی پرت سے ہٹانا پڑتا ہے۔ مجھے پورا یقین ہے کہ ہم سب ایک ایسی صورتحال سے دوچار ہوئے ہیں جہاں ہم ایک موڈل کھولتے ہیں اور کسی بھی وجہ سے، یہ ظاہر نہیں ہوتا ہے۔ ایسا نہیں ہے کہ یہ ٹھیک سے نہیں کھلا، لیکن یہ کہ اسٹیکنگ سیاق و سباق کی نچلی پرت میں یہ نظر سے باہر ہے۔ یہ آپ کو حیرت میں ڈال دیتا ہے کہ "کیسے آئے؟" جب سے آپ نے سیٹ کیا:
.overlay { پوزیشن: مقررہ؛ /* اسٹیکنگ سیاق و سباق تخلیق کرتا ہے */ زیڈ انڈیکس: 1؛ /* عنصر کو ہر چیز کے اوپر ایک پرت پر رکھتا ہے */ انسیٹ: 0؛ چوڑائی: 100٪؛ اونچائی: 100vh؛ overflow: پوشیدہ؛ پس منظر کا رنگ: #00000080؛ }
یہ درست نظر آتا ہے، لیکن اگر موڈل ٹرگر پر مشتمل پیرنٹ عنصر کسی دوسرے پیرنٹ عنصر کے اندر ایک چائلڈ عنصر ہے جو z-index: 1 پر بھی سیٹ ہے، جو کہ تکنیکی طور پر موڈل کو مرکزی فولڈر کے ذریعے غیر واضح ذیلی پرت میں رکھتا ہے۔ آئیے اس مخصوص منظر نامے اور اسٹیکنگ سیاق و سباق کے کچھ دوسرے عام نقصانات کو دیکھیں۔ میرا خیال ہے کہ آپ نہ صرف یہ دیکھیں گے کہ نادانستہ طور پر اسٹیکنگ سیاق و سباق بنانا کتنا آسان ہے، بلکہ ان کا غلط انتظام کرنے کا طریقہ بھی۔ اس کے علاوہ، آپ کس طرح منظم ریاست میں واپس آتے ہیں اس کا انحصار صورت حال پر ہے۔ منظر نامہ 1: ٹریپڈ ماڈل
آپ فوری طور پر اپنے موڈل کو کم سطح کی تہہ میں پھنسے ہوئے دیکھ سکتے ہیں اور والدین کی شناخت کر سکتے ہیں۔ براؤزر ایکسٹینشنز اسمارٹ ڈویلپرز نے مدد کے لیے ایکسٹینشنز بنائے ہیں۔ اس طرح کے ٹولز "CSS Stacking Context Inspector" Chrome ایکسٹینشن آپ کے DevTools میں ایک اضافی z-index ٹیب کا اضافہ کرتے ہیں تاکہ آپ کو ان عناصر کے بارے میں معلومات دکھائیں جو اسٹیکنگ سیاق و سباق بناتے ہیں۔
IDE ایکسٹینشنز یہاں تک کہ آپ VS کوڈ کے لیے اس طرح کی ایکسٹینشن کے ساتھ ترقی کے دوران مسائل کو بھی دیکھ سکتے ہیں، جو آپ کے ایڈیٹر میں براہ راست اسٹیکنگ سیاق و سباق کے ممکنہ مسائل کو نمایاں کرتا ہے۔
ان اسٹیکنگ اور دوبارہ کنٹرول حاصل کرنا بنیادی وجہ کی نشاندہی کرنے کے بعد، اگلا مرحلہ اس سے نمٹنا ہے۔ اس مسئلے سے نمٹنے کے لیے آپ کئی طریقے اختیار کر سکتے ہیں، اور میں ان کی فہرست ترتیب دوں گا۔ آپ کسی بھی سطح پر کسی کو بھی منتخب کر سکتے ہیں، اگرچہ؛ کوئی شکایت یا رکاوٹ نہیں ڈال سکتا۔ ایچ ٹی ایم ایل کی ساخت کو تبدیل کریں۔ یہ بہترین حل سمجھا جاتا ہے۔ اسٹیکنگ سیاق و سباق کے مسئلے سے نمٹنے کے لیے، آپ نے اپنے HTML میں کچھ عناصر کو مضحکہ خیز پوزیشنوں میں رکھا ہوگا۔ صفحہ کو دوبارہ ترتیب دینے سے آپ کو DOM کو نئی شکل دینے اور اسٹیکنگ سیاق و سباق کے مسئلے کو ختم کرنے میں مدد ملے گی۔ پریشانی والے عنصر کو تلاش کریں اور اسے HTML مارک اپ میں پھنسنے والے عنصر سے ہٹا دیں۔ مثال کے طور پر، ہم پہلے منظر نامے کو حل کر سکتے ہیں، "The Trapped Modal"، .modal-container کو ہیڈر سے باہر لے جا کر اور اسے خود سے
عنصر میں رکھ کر۔اس مواد میں 2 کا z-انڈیکس ہے اور پھر بھی اس کا احاطہ نہیں کیا جائے گا۔ہیڈر
مرکزی مواد
جب آپ "اوپن موڈل" کے بٹن پر کلک کرتے ہیں، تو موڈل کو ہر چیز کے سامنے رکھا جاتا ہے جیسا کہ سمجھا جاتا ہے۔ قلم کا منظر نامہ 1 دیکھیں: دی ٹریپڈ موڈل (حل) [فورک] از شوومبو گیبریل ایومائیڈ۔ کو ایڈجسٹ کریں۔سی ایس ایس میں پیرنٹ اسٹیکنگ سیاق و سباق کیا ہوگا اگر عنصر ایک ہے تو آپ لے آؤٹ کو توڑے بغیر حرکت نہیں کر سکتے؟ اس مسئلے کو حل کرنا بہتر ہے: والدین سیاق و سباق قائم کرتے ہیں۔ سیاق و سباق کو متحرک کرنے کے لیے ذمہ دار CSS پراپرٹی (یا پراپرٹیز) تلاش کریں اور اسے ہٹا دیں۔ اگر اس کا کوئی مقصد ہے اور اسے ہٹایا نہیں جا سکتا، تو پورے کنٹینر کو اٹھانے کے لیے والدین کو اس کے بہن بھائی عناصر سے زیادہ زیڈ انڈیکس قدر دیں۔ زیڈ انڈیکس کی اعلی قدر کے ساتھ، پیرنٹ کنٹینر اوپر چلا جاتا ہے، اور اس کے بچے صارف کے قریب نظر آتے ہیں۔ جو کچھ ہم نے "Dubmerged Dropdown" منظر نامے میں سیکھا اس کی بنیاد پر، ہم ڈراپ ڈاؤن کو navbar سے باہر نہیں لے جا سکتے۔ اس کا کوئی مطلب نہیں ہوگا. تاہم، ہم .navbar کنٹینر کی z-index کی قدر کو .content عنصر کی z-index کی قدر سے زیادہ بڑھا سکتے ہیں۔ navbar { پس منظر: #333؛ /* زیڈ انڈیکس: 1؛ */ زیڈ انڈیکس: 3؛ پوزیشن: رشتہ دار }
اس تبدیلی کے ساتھ، ڈراپ ڈاؤن مینو اب مواد کے سامنے بغیر کسی مسئلے کے ظاہر ہوتا ہے۔
قلم کا منظر نامہ 2 دیکھیں: ڈوبنے والا ڈراپ ڈاؤن (حل) شویومبو گیبریل ایومائڈ کے ذریعہ [فورکڈ]۔
پورٹلز کو آزمائیں، اگر کوئی فریم ورک استعمال کر رہے ہیں۔
React یا Vue جیسے فریم ورکس میں، ایک پورٹل ایک ایسی خصوصیت ہے جو آپ کو DOM میں اس کے عام پیرنٹ درجہ بندی سے باہر کسی جزو کو پیش کرنے دیتی ہے۔ پورٹل آپ کے اجزاء کے لیے ٹیلی پورٹیشن ڈیوائس کی طرح ہوتے ہیں۔ وہ آپ کو دستاویز میں کسی بھی حصے کے HTML کو رینڈر کرنے دیتے ہیں (عام طور پر دائیں document.body میں) جبکہ اسے منطقی طور پر اس کے اصل والدین سے پروپس، ریاست اور واقعات کے لیے منسلک رکھتے ہیں۔ یہ اسٹیکنگ سیاق و سباق کے جال سے بچنے کے لئے بہترین ہے کیونکہ پیش کردہ آؤٹ پٹ لفظی طور پر پریشانی والے پیرنٹ کنٹینر سے باہر ظاہر ہوتا ہے۔
ReactDOM.createPortal(
یہ یقینی بناتا ہے کہ آپ کا ڈراپ ڈاؤن مواد اس کے والدین کے پیچھے چھپا نہیں ہے، چاہے والدین کے پاس اوور فلو ہو: پوشیدہ یا کم زیڈ انڈیکس۔ "The Clipped Tooltip" کے منظر نامے میں جسے ہم نے پہلے دیکھا تھا، میں نے ٹول ٹپ کو اوور فلو سے بچانے کے لیے ایک پورٹل کا استعمال کیا: خفیہ کلپ کو دستاویز کے باڈی میں رکھ کر اور اسے کنٹینر کے اندر محرک کے اوپر رکھ کر۔ قلم کا منظر نامہ 3 دیکھیں: دی کلپ شدہ ٹول ٹِپ (حل) [فورکڈ] از شویومبو گیبریل ایومائیڈ۔ ضمنی اثرات کے بغیر اسٹیکنگ سیاق و سباق کا تعارف پچھلے حصے میں بیان کیے گئے تمام طریقوں کا مقصد اسٹیکنگ سیاق و سباق کے مسائل سے عناصر کو "ان اسٹیکنگ" کرنا ہے، لیکن کچھ ایسے حالات ہیں جہاں آپ کو درحقیقت اسٹیکنگ سیاق و سباق کی ضرورت ہوگی یا بنانا چاہیں گے۔ ایک نیا اسٹیکنگ سیاق و سباق بنانا آسان ہے، لیکن تمام نقطہ نظر ایک ضمنی اثر کے ساتھ آتے ہیں۔ یعنی تنہائی استعمال کرنے کے علاوہ: isolate۔ جب کسی عنصر پر لاگو کیا جاتا ہے، تو اس عنصر کے بچوں کے اسٹیکنگ سیاق و سباق کا تعین اس کے باہر کے عناصر سے متاثر ہونے کی بجائے ہر بچے کے حوالے سے اور اس سیاق و سباق کے اندر ہوتا ہے۔ ایک بہترین مثال اس عنصر کو منفی قدر تفویض کرنا ہے، جیسے کہ z-index: -1۔ تصور کریں کہ آپ کے پاس .card کا جزو ہے۔ آپ ایک آرائشی شکل شامل کرنا چاہتے ہیں جو .card کے متن کے پیچھے ہو، لیکن کارڈ کے پس منظر کے اوپر ہو۔ کارڈ پر اسٹیکنگ سیاق و سباق کے بغیر، z-index: -1 شکل کو روٹ اسٹیکنگ سیاق و سباق (پورے صفحہ) کے نیچے بھیجتا ہے۔ اس سے یہ کارڈ کے سفید پس منظر کے پیچھے غائب ہو جاتا ہے: Shoyombo Gabriel Ayomide کا قلم منفی زیڈ انڈیکس (مسئلہ) [فورکڈ] دیکھیں۔ اس کو حل کرنے کے لیے، ہم الگ تھلگ ہونے کا اعلان کرتے ہیں: والدین .card پر الگ تھلگ: Shoyombo Gabriel Ayomide کی طرف سے Pen Negative z-index (حل) [فورکڈ] دیکھیں۔ اب، .card عنصر خود ایک اسٹیکنگ سیاق و سباق بن جاتا ہے۔ جب اس کے چائلڈ ایلیمینٹ — آرائشی شکل پر بنائی گئی :before pseudo-element — میں z-index: -1 ہوتا ہے، تو یہ والدین کے اسٹیکنگ سیاق و سباق کے بالکل نیچے جاتا ہے۔ یہ بالکل متن کے پیچھے اور کارڈ کے پس منظر کے اوپر بیٹھا ہے، جیسا کہ ارادہ ہے۔ نتیجہ یاد رکھیں: اگلی بار جب آپ کا z-index قابو سے باہر نظر آتا ہے، تو یہ ایک پھنسے ہوئے اسٹیکنگ سیاق و سباق ہے۔ حوالہ جات
اسٹیکنگ سیاق و سباق (MDN) زیڈ انڈیکس اور اسٹیکنگ سیاق و سباق (web.dev) "سی ایس ایس میں الگ تھلگ پراپرٹی کے ساتھ ایک نیا اسٹیکنگ سیاق و سباق کیسے بنایا جائے"، نیٹلی پینا "واٹ دی ہیک، زیڈ انڈیکس؟"، جوش کومو
SmashingMag پر مزید پڑھنا
"بڑے پروجیکٹس میں سی ایس ایس زیڈ انڈیکس کا انتظام"، سٹیون فریسن "چپچپا ہیڈر اور مکمل اونچائی کے عناصر: ایک مشکل مجموعہ"، فلپ براؤن "ایک اجزاء پر مبنی ویب ایپلیکیشن میں Z-Index کا انتظام"، Pavel Pomerantsev "Z-Index CSS پراپرٹی: ایک جامع نظر"، لوئس لازارس
