ئایا تا ئێستا z-index: 99999ت لەسەر توخمێک لە CSS ـەکەتدا داناوە، و لەسەر توخمەکانی تر دەرناچێت؟ بەهایەکی ئەوەندە گەورە دەبێت بە ئاسانی ئەو توخمە بە شێوەیەکی بینراو لەسەر هەر شتێکی تر دابنێت، بە گریمانەیەک کە هەموو توخمە جیاوازەکان یان بە بەهایەکی کەمتر دانراون یان بە هیچ شێوەیەک دانەنراون. وێبپەڕێک بەزۆری لە فەزای دوو ڕەهەندیدا نیشان دەدرێت؛ بەڵام بە بەکارهێنانی تایبەتمەندییە تایبەتەکانی CSS، تەختەیەکی خەیاڵی میحوەر z دەناسێنرێت بۆ گەیاندنی قووڵی. ئەم تەختەیە ڕاستڕەوە بە شاشەکەوە و لەوێوە بەکارهێنەر هەست بە ڕێزبەندی توخمەکان دەکات، یەکێکیان لەسەر ئەوی تر. بیرۆکەی پشت میحوەر z خەیاڵی، تێڕوانینی بەکارهێنەر بۆ توخمە کۆکراوەکان، ئەوەیە کە تایبەتمەندییەکانی CSS کە دروستی دەکەن یەکدەگرن و ئەوەی ئێمە پێی دەڵێین کۆنتێکستی کۆکراوە پێکدەهێنن. ئێمە باس لەوە دەکەین کە چۆن توخمەکان لە وێبپەڕێکدا "کۆدەکرێنەوە"، چی ڕێکوپێکی کۆکردنەوە کۆنتڕۆڵ دەکات، و ڕێگەی پراکتیکی بۆ "کۆکردنەوەی" توخمەکان لەکاتی پێویستدا. دەربارەی کۆکردنەوەی کۆنتێکستەکان وێبپەڕەکەت وەک مێزێک بیهێنە بەرچاوت. لەگەڵ زیادکردنی توخمەکانی HTML، پارچە کاغەزەکان، یەک لە دوای یەک، لەسەر مێزەکە دادەنێیت. دوا پارچە کاغەز کە دانراوە هاوتایە لەگەڵ تازەترین توخمەکەی HTML زیادکراو، و لەسەر هەموو ئەو کاغەزانەی تر دادەنیشێت کە پێش خۆی دانراون. ئەمە ڕەوتی ئاسایی بەڵگەنامەکانە، تەنانەت بۆ توخمە هێلانەکراوەکانیش. مێزەکە خۆی نوێنەرایەتی کۆنتێکستی کۆکردنەوەی ڕەگ دەکات، کە لەلایەن توخمە ەوە پێکهاتووە، کە هەموو فۆڵدەرەکانی تر لەخۆدەگرێت. ئێستا، تایبەتمەندییە تایبەتەکانی CSS دێنە گۆڕەپانەکەوە. تایبەتمەندییەکانی وەک position (بە z-index)، ناڕوونی، گۆڕانکاری و contain) وەک فۆڵدەرێک کاردەکەن. ئەم فۆڵدەرە توخمێک و هەموو منداڵەکانی وەردەگرێت و لە ستاکی سەرەکی دەریاندەهێنێت و گروپیان دەکات بۆ ژێر ستاکێکی جیاواز، ئەمەش دروست دەکات کە ئێمە پێی دەڵێین کۆنتێکستی ستاککردن. بۆ توخمە جێگیرکراوەکان، ئەمە کاتێک ڕوودەدات کە بەهای z-index ڕابگەیەنین جگە لە auto. بۆ تایبەتمەندییەکانی وەک ناڕوونی، گۆڕانکاری و فلتەر، کۆنتێکستی کۆکردنەوە بە شێوەیەکی ئۆتۆماتیکی دروست دەکرێت کاتێک بەها تایبەتەکان جێبەجێ دەکرێن.
هەوڵبدە ئەمە تێبگەیت: کاتێک پارچە کاغەزێک (واتە توخمێکی منداڵ) لە ناو فۆڵدەرێکدا بێت (واتە، کۆنتێکستی کۆکردنەوەی دایک و باوک)، هەرگیز ناتوانێت لەو فۆڵدەرە دەربچێت یان لە نێوان کاغەزەکاندا لە فۆڵدەرێکی جیاوازدا دابنرێت. ئێستا z-index ی تەنها لەناو فۆڵدەری خۆیدا پەیوەندیدارە.
لە وێنەی خوارەوەدا، ئێستا کاغەزی B لە چوارچێوەی ستاککردنی فۆڵدەری Bدایە، و تەنها دەتوانرێت لەگەڵ کاغەزەکانی تری ناو فۆڵدەرەکەدا داوا بکرێت.
ئەگەر بتەوێت بیهێنە بەرچاوت کە دوو فۆڵدەر لەسەر مێزەکەت هەیە:
.folder-a { z-index: 1؛ } .folder-b { z-index: 2؛ }
با کەمێک مارکاپەکە نوێ بکەینەوە. لەناو فۆڵدەری A لاپەڕەیەکی تایبەتە، z-index: 9999. لە ناو فۆڵدەری B لاپەڕەیەکی سادەیە، z-index: 5.
.پەڕەی تایبەت { z-index: 9999; } .plain-page { z-index: 5؛ }
کام پەیج لە سەرەوەیە؟ It’s the .plain-page in Folder B. وێبگەڕەکە کاغەزەکانی منداڵ پشتگوێ دەخات و سەرەتا دوو فۆڵدەرەکە کۆدەکاتەوە. فۆڵدەری B دەبینێت (z-index: 2) و دەیخاتە سەر فۆڵدەری A (z-index: 1) چونکە دەزانین دوو لە یەک گەورەترە. لەم نێوەندەدا، لاپەڕەی .special-page کە لەسەر z-index: 9999 دانراوە لە خوارەوەی ستاکەکەدایە هەرچەندە z-index ەکەی لەسەر بەرزترین بەهای مومکین دانراوە. هەروەها دەتوانرێت کۆنتێکستەکانی کۆکردنەوە هێلانە بکرێت (فۆڵدەرەکانی ناو فۆڵدەرەکان)، کە "دارێکی خێزان" دروست دەکات. هەمان بنەما دەگونجێت: منداڵ هەرگیز ناتوانێت لە فۆڵدەری دایک و باوکی ڕزگاری بێت. ئێستا کە تێگەیشتووە کە چۆن کۆنتێکستەکانی کۆکردنەوە وەک فۆڵدەرەکان ڕەفتار دەکەن کە چینەکان گرووپ دەکەن و ڕێکدەخەنەوە، شایەنی ئەوەیە بپرسین: بۆچی هەندێک تایبەتمەندی — وەک گۆڕین و ناڕوونی — کۆنتێکستی کۆکردنەوەی نوێ دروست دەکەن؟ لێرەدا شتەکە ئەوەیە: ئەم تایبەتمەندیانە بەهۆی چۆنیەتی دەرکەوتنیانەوە، کۆنتێکستی کۆکردنەوە دروست ناکەن؛ ئەوان بەهۆی چۆنیەتی کارکردنی وێبگەڕەکە لە ژێر کابۆکەدا ئەو کارە دەکەن. کاتێک گۆڕانکاری، ناڕوونی، فلتەر، یان دیدگا جێبەجێ دەکەیت، بە وێبگەڕەکە دەڵێیت، “هەی، ئەم توخمە ڕەنگە بجوڵێت، بسووڕێتەوە، یان کاڵ بێتەوە، بۆیە ئامادەبە!”
کاتێک ئەم تایبەتمەندیانە بەکاردەهێنیت، وێبگەڕەکە کۆنتێکستێکی نوێی کۆکردنەوە دروست دەکات بۆ بەڕێوەبردنی ڕەندەرکردن بە شێوەیەکی کاراتر. ئەمەش ڕێگە بە وێبگەڕ دەدات کە بە شێوەیەکی سەربەخۆ مامەڵە لەگەڵ ئەنیمەیشن و گۆڕانکاری و کاریگەرییە بینراوەکاندا بکات، ئەمەش پێویستی بە دووبارە حیسابکردنەوەی چۆنیەتی کارلێکی ئەم توخمانە لەگەڵ باقی لاپەڕەکەدا کەمدەکاتەوە. بیر لەوە بکەرەوە کە وێبگەڕەکە دەڵێت، “من بە جیا مامەڵە لەگەڵ ئەم فۆڵدەرەدا دەکەم بۆ ئەوەی پێویست نەکات هەموو مێزەکە گۆڕانکاری بەسەردا بکەم کە هەر جارێک شتێک لەناوەوەیدا دەگۆڕێت.” بەڵام هەیەکاریگەری لاوەکییە. کاتێک وێبگەڕەکە توخمێک بەرز دەکاتەوە بۆ ناو چینەکەی خۆی، دەبێت هەموو شتێک لەناو خۆیدا "تەخت" بکات، ئەمەش کۆنتێکستێکی نوێی کۆکردنەوە دروست بکات. وەک ئەوە وایە فۆڵدەرێک لە سەر مێزەکە دەربهێنیت بۆ ئەوەی بە جیا مامەڵەی لەگەڵ بکەیت؛ هەموو شتێک لەناو ئەو فۆڵدەرەدا گروپ دەکرێت، و ئێستا وێبگەڕەکە وەک یەک یەکە مامەڵەی لەگەڵ دەکات کاتێک بڕیار دەدات چی لەسەر چی دادەنیشێت. کەواتە هەرچەندە ڕەنگە تایبەتمەندییەکانی گۆڕانکاری و ناڕوونی کاریگەرییان لەسەر شێوازی کۆکردنەوەی توخمەکان بە شێوەیەکی بینراو نەبێت، بەڵام دەیکەن، و ئەوە بۆ باشکردنی کاراییە. چەندین تایبەتمەندی تری CSS دەتوانن بە هۆکاری هاوشێوە کۆنتێکستی کۆکردنەوە دروست بکەن. MDN لیستێکی تەواو دەدات ئەگەر بتەوێت قووڵتر هەڵکەنیت. ژمارەیەکی زۆریان هەیە، ئەمەش تەنها ئەوە دەردەخات کە چەندە ئاسانە بەبێ ئاگاداری کۆنتێکستی کۆکردنەوە دروست بکەیت بەبێ ئەوەی بزانیت. کێشەی “Unstacking”. کێشەی کۆکردنەوە دەتوانێت بەهۆی چەندین هۆکارەوە سەرهەڵبدات، بەڵام هەندێکیان زیاتر لە هەندێکی تر باون. پێکهاتە مۆداڵییەکان نەخشێکی کلاسیکن چونکە پێویستیان بە گۆڕینی پێکهاتەکە هەیە بۆ ئەوەی لەسەر چینێکی سەرەوە لە سەرووی هەموو توخمەکانی ترەوە "بکرێتەوە"، پاشان لە چینە سەرەوەکە دەربهێنرێت کاتێک "داخراوە". من زۆر دڵنیام کە هەموومان تووشی دۆخێک بووین کە مۆداڵێک دەکەینەوە و بە هەر هۆکارێک بێت، دەرناکەوێت. ئەوە نییە کە بە باشی نەکرایەوە، بەڵکو لە چینێکی خوارەوەی کۆنتێکستی کۆکردنەوەدا لە دەرەوەی چاودایە. ئەمەش وا دەکات پرسیار بکەیت “چۆن؟” لەوەتەی تۆ داناوە:
.overlay { پێگە: جێگیر؛ /* کۆنتێکستی ستاککردن دروست دەکات */ z-index: 1؛ /* توخمەکە دەخاتە سەر چینێک لە سەرووی هەموو شتێکی ترەوە */ ئینستێت: 0؛ پانی: 100%؛ بەرزی: 100vh؛ ڕژان: شاراوە؛ ڕەنگی پاشبنەما: #00000080؛ }
ئەمە ڕاست دەردەکەوێت، بەڵام ئەگەر توخمە باوکەکە کە تریگەری مۆداڵی تێدایە توخمێکی منداڵ بێت لەناو توخمێکی باوکی تردا کە هەروەها بۆ z-index دانراوە: 1، ئەوە لە ڕووی تەکنیکییەوە مۆداڵەکە دەخاتە ناو چینێکی لاوەکییەوە کە لەلایەن فۆڵدەری سەرەکییەوە تەمومژاوی کراوە. با سەیری ئەو سیناریۆ تایبەتە و یەک دوو تەڵەی باوی تری ستاککردن-کۆنتێکست بکەین. پێموایە نەک هەر دەبینیت کە چەندە ئاسانە بەبێ ئاگاداری کۆنتێکستی کۆکردنەوە دروست بکەیت، بەڵکو چۆن بە هەڵە بەڕێوەیان ببەیت. هەروەها چۆن دەگەڕێیتەوە بۆ حاڵەتێکی بەڕێوەبەردراو بەندە بە دۆخەکەوە. سیناریۆی یەکەم: مۆداڵی گیرخواردوو
یەکسەر دەتوانیت مۆداڵەکەت ببینیت کە لە چینێکی ئاست نزمدا گیری خواردووە و دایک و باوکەکە دەستنیشان بکەیت. درێژکراوەی وێبگەڕ گەشەپێدەرانی زیرەک درێژکراوەیان دروست کردووە بۆ یارمەتیدان. ئامرازەکانی وەک ئەم “CSS Stacking Context Inspector” درێژکراوەی کرۆم تابێکی z-index زیاد دەکەن بۆ DevTools ـەکەت بۆ ئەوەی زانیاریت پیشان بدات دەربارەی ئەو توخمانەی کە کۆنتێکستی کۆکردنەوە دروست دەکەن.
درێژکراوەی IDE تەنانەت دەتوانیت کێشەکان لە کاتی پەرەپێدان بە درێژکراوەیەکی وەک ئەم بۆ VS Code دەستنیشان بکەیت، کە تیشک دەخاتە سەر کێشەکانی کۆنتێکستی کۆکردنەوەی ئەگەری ڕاستەوخۆ لە سەرنوسەرەکەتدا.
Unstacking و وەرگرتنەوەی کۆنتڕۆڵ دوای ئەوەی ڕەگی هۆکارەکەمان دەستنیشان کرد، هەنگاوی داهاتوو مامەڵەکردنە لەگەڵیدا. چەندین ڕێگە هەیە کە دەتوانیت بیگریتەبەر بۆ ڕووبەڕووبوونەوەی ئەم کێشەیە، و من بە ڕێکوپێکی دەیانخەمەڕوو. دەتوانیت لە هەر ئاستێکدا هەر کەسێک هەڵبژێریت، هەرچەندە؛ کەس ناتوانێت گلەیی و ڕێگری لە کەسێکی تر بکات. گۆڕینی پێکهاتەی HTML ئەمەش بە چاککردنی گونجاو دادەنرێت. بۆ ئەوەی تووشی کێشەی کۆنتێکستی کۆکردنەوە بیت، دەبێت هەندێک توخمت لە شوێنی کۆمیدیدا لەناو HTML ـەکەتدا داناوە. دووبارە داڕشتنەوەی لاپەڕەکە یارمەتیت دەدات کە DOM دابڕێژیتەوە و کێشەی کۆنتێکستی ستاککردن نەهێڵیت. توخمە کێشەدارەکە بدۆزەرەوە و لە توخمە trapping لە HTML markup دا دەریبهێنە. بۆ نموونە دەتوانین سیناریۆی یەکەم، “The Trapped Modal” چارەسەر بکەین، بە گواستنەوەی .modal-container لە سەردێڕەکە و دانانی لە توخمە
بە خۆی.سەردێڕ
ناوەڕۆکی سەرەکی
ئەم ناوەڕۆکە z-index ی 2 ی هەیە و هێشتا مۆداڵەکە ناگرێتەوە.
ناونیشانی مۆداڵی
ئێستا، من لە پشت هیچ شتێکەوە نیم. لە ئەنجامی داڕشتنەوەی DOM پێگەیەکی باشترم بەدەستهێناوە.
کاتێک کلیک لەسەر دوگمەی “Open Modal” دەکەیت، مۆداڵەکە لەبەردەم هەموو شتێکی تردا جێگیر دەبێت وەک ئەوەی بڕیارە بێت. سەیری سیناریۆی قەڵەم 1 بکە: مۆداڵی گیرخواردوو (چارەسەر) [چنگاڵ کراوە] لەلایەن شۆیۆمبۆ گابرێل ئایۆمیدەوە. ڕێکخستنی Theکۆنتێکستی کۆکردنەوەی دایک و باوک لە CSS چی ئەگەر توخمەکە توخمێک بێت کە ناتوانیت بیجوڵێنیت بەبێ ئەوەی نەخشەکە بشکێنیت؟ باشترە پرسەکە چارەسەر بکرێت: دایک و باوک کۆنتێکستەکە دادەمەزرێنێت. تایبەتمەندی CSS (یان تایبەتمەندییەکان) بدۆزەرەوە کە بەرپرسیارە لە دەستپێکردنی کۆنتێکستەکە و لاببە. ئەگەر ئامانجێکی هەبوو و نەتوانرا لاببرێ، بەهایەکی z-index بەرزتر بدە بە دایک و باوکەکە لە توخمە خوشکەکانی بۆ بەرزکردنەوەی تەواوی دەفرەکە. بە بەهای z-index بەرزتر، دەفری باوک دەچێتە سەرەوە، و منداڵەکانی لە بەکارهێنەرەوە نزیکتر دەردەکەون. بە پشتبەستن بەو شتانەی لە سیناریۆی “The Submerged Dropdown” فێربووین، ناتوانین دابەزینەکە لە navbar دەربهێنین؛ ئەوە مانای نەدەبوو. بەڵام دەتوانین بەهای z-index ی کۆنتێنەری .navbar زیاد بکەین بۆ ئەوەی گەورەتر بێت لە بەهای z-index ی توخمە .content. .navbar { پاشخان: #333؛ /* z-index: 1؛ */ z-index: 3؛ پێگە: ڕێژەیی؛ }
بەم گۆڕانکارییە ئێستا .dropdown-menu لەبەردەم ناوەڕۆکەکەدا دەردەکەوێت بەبێ هیچ کێشەیەک. سەیری سیناریۆی قەڵەم ٢ بکە: دابەزینی ژێرئاوکەوتوو (چارەسەر) [چنگاڵ کراوە] لەلایەن شۆیۆمبۆ گابرێل ئایۆمیدەوە. پۆرتاڵەکان تاقی بکەرەوە، ئەگەر چوارچێوەیەک بەکاردەهێنیت لە چوارچێوەی وەک React یان Vue دا، پۆرتاڵ تایبەتمەندییەکە کە ڕێگەت پێدەدات پێکهاتەیەک لە دەرەوەی پلەبەندی ئاسایی دایکی خۆی لە DOMدا ڕەندەر بکەیت. پۆرتاڵەکان وەک ئامێرێکی تەلەپۆرتەشن وایە بۆ پێکهاتەکانت. ئەوان ڕێگەت پێدەدەن HTML ی پێکهاتەیەک لە هەر شوێنێکی بەڵگەنامەکەدا پیشان بدەیت (بە شێوەیەکی گشتی ڕاست لە document.body) لە هەمان کاتدا بە شێوەیەکی لۆژیکی بەستراوەتەوە بە دایک و باوکی سەرەتاییەوە بۆ پرۆپەکان، دۆخ و ڕووداوەکان. ئەمە تەواو گونجاوە بۆ دەربازبوون لە تەڵەکانی کۆنتێکستی کۆکردنەوە لەبەرئەوەی دەرئەنجامی ڕەندەرکراو بە شێوەیەکی ڕستەیی لە دەرەوەی کۆنتێنەری باوکی کێشەدار دەردەکەوێت. ReactDOM.دروستکردنی دەروازە( <ئامۆژگاری ئامراز />، بەڵگەنامە.جەستە );
ئەمە دڵنیای دەدات کە ناوەڕۆکی دابەزینت لە پشت دایک و باوکەکەیەوە نەشاردراوەتەوە، تەنانەت ئەگەر دایک و باوکەکە ڕژانی هەبێت: شاراوە یان z-index ی خوارەوە. لە سیناریۆی “The Clipped Tooltip” کە پێشتر سەیریمان کرد، من پۆرتاڵێکم بەکارهێنا بۆ ڕزگارکردنی ئامرازەکە لە ڕژانەکە: کلیپی شاراوە بە دانانی لە ناو جەستەی بەڵگەنامەکەدا و دانانی لە سەرووی تریگەرەکەوە لەناو دەفرەکەدا. سەیری سیناریۆی قەڵەم 3 بکە: نوکی ئامرازی بڕاو (چارەسەر) [چنگاڵ کراوە] لەلایەن شۆیۆمبۆ گابرێل ئایۆمید. ناساندنی کۆنتێکستی ستاککردن بەبێ کاریگەری لاوەکی هەموو ئەو ڕێگایانەی لە بەشی پێشوودا ڕوونکراونەتەوە ئامانجیان "هەڵدانەوەی" توخمەکانە لە کۆنتێکستە کێشەدارەکانی کۆکردنەوە، بەڵام هەندێک بارودۆخ هەن کە لە ڕاستیدا پێویستت بە یان دەتەوێت کۆنتێکستی کۆکردنەوە دروست بکەیت. دروستکردنی کۆنتێکستی نوێی ستاککردن ئاسانە، بەڵام هەموو ڕێگاکان کاریگەری لاوەکییان لەگەڵدایە. واتە جگە لە بەکارهێنانی isolation: isolate. کاتێک کە بۆ توخمێک بەکاردەهێنرێت، چوارچێوەی کۆکردنەوەی منداڵەکانی ئەو توخمە بە بەراورد بە هەر منداڵێک و لەناو ئەو چوارچێوەیەدا دیاری دەکرێت، نەک لە ژێر کاریگەری توخمەکانی دەرەوەی ئەو توخمەدا. نموونەیەکی کلاسیک بریتییە لە دیاریکردنی ئەو توخمە بەهایەکی نەرێنی، وەکو z-index: -1. بیهێنە بەرچاوت کە پێکهاتەی .card ـت هەیە. دەتەوێت شێوەیەکی دیکۆراتی زیاد بکەیت کە لە پشت دەقی .card دابنیشێت، بەڵام لەسەر پاشبنەمای کارتەکە. بەبێ کۆنتێکستی کۆکردنەوە لەسەر کارتەکە، z-index: -1 شێوەکە دەنێرێت بۆ خوارەوەی کۆنتێکستی کۆکردنەوەی ڕەگ (تەواوی لاپەڕەکە). ئەمەش وا دەکات لە پشت پاشبنەمای سپی .card’s ون بێت: سەیری پێن نێگەتیڤی z-index (کێشە) بکە [چنگاڵ] لەلایەن شۆیۆمبۆ گابرێل ئایۆمیدەوە. بۆ چارەسەرکردنی ئەمە، ئێمە گۆشەگیری ڕادەگەیەنین: isolate on the parent .card: سەیری پێن نێگەتیڤ z-index (گیراوە) بکە [چنگاڵ] لەلایەن شۆیۆمبۆ گابرێل ئایۆمید. ئێستا، توخمە .card خۆی دەبێتە کۆنتێکستی ستاککردن. کاتێک توخمە منداڵەکەی — شێوەی دیکۆراتی کە لەسەر توخمە ساختەکەی :پێش دروستکراوە — z-index: -1 ی هەیە، دەچێتە خوارەوەی کۆنتێکستی کۆکردنەوەی دایک و باوک. بە تەواوی لە پشت دەقەکەوە و لەسەر پاشبنەمای کارتەکە دادەنیشێت، وەک ئەوەی مەبەست لێی بووە. دەرەنجام لەبیرت بێت: جارێکی تر کە z-index ـەکەت لە ژێر کۆنتڕۆڵ دەرچووە، ئەوە کۆنتێکستی کۆکردنەوەیەکی گیری خواردووە. ئاماژەکان
کۆنتێکستی کۆکردنەوە (MDN) Z-index و کۆنتێکستەکانی کۆکردنەوە (web.dev) “چۆن کۆنتێکستی نوێی کۆکردنەوە دروست بکەین بە تایبەتمەندی دابڕان لە CSS”، ناتالی پینا "چی هێک، z-index؟؟"، جۆش کۆمۆ
خوێندنەوەی زیاتر لەسەر SmashingMag
“بەڕێوەبردنی CSS Z-Index لە پڕۆژە گەورەکاندا”، ستیڤن فریسۆن "سەرە چەسپاوەکان و توخمە تەواو بەرزەکان: تێکەڵەیەکی فێڵاوی"، فیلیپ براونن "بەڕێوەبردنی Z-Index لە بەرنامەیەکی وێبدا لەسەر بنەمای پێکهاتەکان"، پاڤێل Pomerantsev "تایبەتمەندی CSS ی Z-Index: نیگایەکی گشتگیر"، لویس لازاریس
