متوفر أيضًا بلغات أخرى: English · Español · Português · Français
سياق التكديس في CSS ولماذا لا يعمل z-index
الصق شفرة CSS لعنصر واعرف هل يسري عليه z-index، وهل ينشئ سياق تكديس، وأي مواصفة تنصّ على ذلك.
ما سياق التكديس؟
سياق التكديس مجموعةُ عناصر تُرسم معًا وحدةً واحدة. فداخله يقرّر z-index الترتيب، وخارجه تُوضع المجموعة كلها قطعةً واحدة ولا يستطيع أبناؤها الإفلات. وهذه الجملة وراء كل عطل في z-index تقريبًا: فالابن الذي قيمته 999999 لا ينافس بقية الصفحة، بل إخوته داخل السياق نفسه فحسب.
والنصف الآخر من الالتباس أن z-index كثيرًا ما لا يفعل شيئًا البتة. فمعيار CSS 2.2 يعطي الخاصية سطرًا يقول إنها تسري على العناصر المموضَعة، فهي على العنصر الساكن ليست تصريحًا ضعيفًا بل غيرَ مطبَّق أصلًا. ولهذا لا ينفع رفع الرقم أبدًا.
وتجيب هذه الأداة عن السؤالين من الشفرة التي تلصقها، وتسمّي المواصفة وراء كل جواب، لأن القواعد موزّعة على سبع وثائق مختلفة ولا تجمعها واحدة.
كيف تستعملها
- الصق تصريحات العنصر. واحدًا في كل سطر أو مفصولةً بفواصل منقوطة. وأزرار الأمثلة الثلاثة تغطي أشيع الحالات: z-index يُهمَل صامتًا، وشفافية تنشئ سياقًا لا يتوقعه أحد، ونافذة ثابتة تحبس كل ما فيها.
- بيّن ما هو الأب. كتلة أو flex أو grid. وهذا أهم مما يبدو: فـz-index نفسه خاملٌ في أبٍ كتلي وعاملٌ في أبٍ flex أو grid، وهذه الأداة وحدها هي الفرق بين الجوابين.
- اقرأ الحكمين ثم الأسباب. يقول الأول هل يسري z-index. ويقول الثاني هل يحبس هذا العنصر متفرعاته، ومع كل سبب المواصفةُ التي تعرّفه.
استثناء flex وgrid الذي يفوت الجميع تقريبًا
القاعدة التي يحملها الناس أن z-index لا يعمل إلا على العناصر المموضَعة. وهي تكاد تكون صحيحة، والاستثناء مكتوب في مواصفتين بالألفاظ نفسها. فمواصفة CSS Flexbox تقول إن قيم z-index غير auto تنشئ سياق تكديس لعناصر flex حتى لو كان position ساكنًا. وتكرّر مواصفة CSS Grid الجملة نفسها لعناصر grid.
فالتصريح الواحد إذن يسلك سلوكين بحسب الأب. فداخل حاوية كتلية عادية يكون العنصر الساكن ذو z-index: 999999 خاملًا ولا ينشئ سياقًا. وانقل ذلك العنصر إلى حاوية flex دون أن تغيّر حرفًا واحدًا من شفرته، فإذا بـz-index يسري وينشئ سياقًا. ولهذا وحده في هذه الأداة أداةُ تحكّم بالأب: فهي المُدخَل الوحيد الذي يغيّر الجواب دون تغيير الشفرة.
وثمة مفاجأة توأم من الجهة الأخرى. فحين يبقى z-index على auto لا ينشئ relative ولا absolute سياق تكديس، بينما ينشئه fixed وsticky دائمًا. وتقول مواصفة التمويضع في CSS ذلك صراحةً: إن الصناديق المموضَعة تمويضعًا ثابتًا أو لاصقًا تشكّل سياق تكديس على كل حال. فنصف قيم position يسلك سلوكًا ونصفها الآخر سلوكًا غيره، وذلك عند القيمة التي لا تضبطها عمدًا قطّ.
الخفيّة: الشفافية
من الأسباب السبعة عشر التي تسردها هذه الصفحة، الشفافية هي الجديرة بالحفظ، إذ لا شيء على الشاشة يشي بها. فالعنصر ذو opacity: 0.999 يبدو تمامًا كالعنصر ذي opacity: 1 — لا تفرّق بينهما عند أي تكبير — ومع ذلك ينشئ الأول سياق تكديس ولا ينشئه الثاني. فتُحبَس المتفرعات كلها فجأة، وتصير قائمةٌ منسدلة كانت تعلو الترويسة واقعةً خلفها.
ويأتي الفخ نفسه في صور أخرى عدة. فأي transform كان، وfilter، وbackdrop-filter، وclip-path، وقناع، وmix-blend-mode غير normal، وisolation: isolate، وcontain مع paint أو layout، وwill-change يسمّي أيًّا من تلك الخصائص، كلها تنشئ سياقًا. وكثير منها يُضاف للأداء أو لأثرٍ عند المرور، ممن لم يكن يفكّر في ترتيب الرسم أصلًا.
ولهذا لا يكون علاج z-index العالق رقمًا أكبر إلا نادرًا. بل هو أن تجد السَّلف الذي يحبس وتقرّر هل ينبغي له. وتُبلغ الأداة بكل سبب تجده لا بأولها، لأن العنصر كثيرًا ما تجتمع فيه ثلاثة أو أربعة معًا فلا تغيّر إزالةُ واحدٍ منها شيئًا.
حدود معلنة
هذه الأداة تفحص عنصرًا واحدًا في المرة. فسياق التكديس خاصيةُ عنصر، لكن العطل خاصيةُ شجرة: فلتعرف هل نافذتك محبوسة عليك النظر في أسلافها واحدًا واحدًا، والأداة لا تراهم من كتلة شفرة واحدة. وإنما تعطيك الجواب لكل عنصر لتصعد به.
وهي تقرأ التصريحات حرفيًّا ولا تحلّ التتالي ولا الخصائص المخصّصة ولا الاختصارات ولا استعلامات الوسائط. فإن كانت شفافيتك آتيةً من صنف لم تلصقه أو من var() معرَّف في مكان آخر، فلا سبيل لها إلى معرفته. فالصق الأنماط المحسوبة من فاحص متصفحك إن أردت اليقين.
وقائمة الأسباب هي المجموعة المعرَّفة في المواصفات المذكورة بجانب كل سطر، وهي غير مغلقة: فمواصفات CSS ما زالت تضيف إليها. وcontain وwill-change إضافتان حديثتان، ولا توجد وثيقة معيارية واحدة تسردها كلها، ولهذا بالضبط يحمل كل سطر استشهاده الخاص بدل الإحالة إلى صفحة واحدة.
وتبقى أسماء المواصفات بالإنجليزية في نسخ هذه الصفحة كلها، لأنها معرّفات وثائق لا نثر. فمن أراد الرجوع إلى واحدة منها احتاج النصّ الذي نشرته الجهة المعيارية.
لماذا هي مجانية؟
هي تحليل نصّ يجري في متصفحك. ولا خادم في الأمر، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.
ولا يُرفع شيء ولا يُحفظ شيء. أعد تحميل الصفحة تجدها قد نسيت شفرتك.