هل سبق لك أن قمت بتعيين z-index: 99999 على عنصر في CSS الخاص بك، ولم يظهر فوق العناصر الأخرى؟ يجب أن تضع القيمة الكبيرة هذا العنصر بسهولة فوق أي شيء آخر، بافتراض أن جميع العناصر المختلفة تم تعيينها إما بقيمة أقل أو لم يتم تعيينها على الإطلاق. عادةً ما يتم تمثيل صفحة الويب في مساحة ثنائية الأبعاد؛ ومع ذلك، من خلال تطبيق خصائص CSS محددة، يتم تقديم مستوى محور Z وهمي لنقل العمق. وهذا المستوى متعامد مع الشاشة، ومنه يدرك المستخدم ترتيب العناصر، واحدة فوق الأخرى. الفكرة وراء المحور z التخيلي، وهو إدراك المستخدم للعناصر المكدسة، هي أن خصائص CSS التي تنشئه تتحد لتشكل ما نسميه سياق التراص. سنتحدث عن كيفية "تكديس" العناصر على صفحة الويب، وما الذي يتحكم في ترتيب التراص، والأساليب العملية "لتفكيك" العناصر عند الحاجة. حول التراص السياقات تخيل صفحة الويب الخاصة بك كمكتب. أثناء قيامك بإضافة عناصر HTML، فإنك تضع قطعًا من الورق، واحدة تلو الأخرى، على المكتب. آخر قطعة من الورق تم وضعها تعادل أحدث عنصر HTML تمت إضافته، وتقع فوق جميع الأوراق الأخرى الموضوعة قبلها. هذا هو التدفق الطبيعي للمستند، حتى بالنسبة للعناصر المتداخلة. يمثل المكتب نفسه سياق تكديس الجذر، الذي يتكون من عنصر ، والذي يحتوي على كافة المجلدات الأخرى. الآن، يتم تفعيل خصائص CSS محددة. خصائص مثل الموضع (مع مؤشر z)، والعتامة، والتحويل، والاحتواء) تعمل كمجلد. يأخذ هذا المجلد عنصرًا وجميع أبنائه، ويستخرجهم من المكدس الرئيسي، ويجمعهم في مكدس فرعي منفصل، مما يؤدي إلى إنشاء ما نسميه سياق التراص. بالنسبة للعناصر الموضوعة، يحدث هذا عندما نعلن عن قيمة فهرس z بخلاف القيمة التلقائية. بالنسبة لخصائص مثل العتامة والتحويل والتصفية، يتم إنشاء سياق التراص تلقائيًا عند تطبيق قيم محددة.
حاول أن تفهم هذا: بمجرد وجود قطعة من الورق (أي عنصر فرعي) داخل مجلد (أي سياق التراص الخاص بالوالد)، لا يمكن أبدًا الخروج من هذا المجلد أو وضعها بين الأوراق في مجلد مختلف. أصبح الفهرس z الخاص به الآن ذا صلة فقط داخل المجلد الخاص به.
في الرسم التوضيحي أدناه، أصبح الورق B الآن ضمن سياق التراص الخاص بالمجلد B، ولا يمكن طلبه إلا مع الأوراق الأخرى الموجودة في المجلد.
تخيل، إذا صح التعبير، أن لديك مجلدين على مكتبك:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
دعونا نقوم بتحديث الترميز قليلاً. يوجد داخل المجلد A صفحة خاصة، فهرس z: 9999. داخل المجلد B توجد صفحة عادية، فهرس z: 5.
.صفحة خاصة { فهرس z: 9999؛ } .صفحة عادية { فهرس z: 5؛ }
أي صفحة في الأعلى؟ إنها .plain-page في المجلد B. يتجاهل المتصفح الأوراق الفرعية ويجمع المجلدين أولاً. يرى المجلد B (مؤشر z: 2) ويضعه أعلى المجلد A (مؤشر z: 1) لأننا نعلم أن اثنين أكبر من واحد. وفي الوقت نفسه، فإن صفحة .special-page المعينة على z-index: 9999 page موجودة في أسفل المكدس على الرغم من تعيين z-index الخاص بها على أعلى قيمة ممكنة. يمكن أيضًا دمج سياقات التراص (مجلدات داخل مجلدات)، مما يؤدي إلى إنشاء "شجرة عائلة". وينطبق المبدأ نفسه: لا يمكن للطفل أبدًا الهروب من مجلد والديه. الآن بعد أن عرفت كيف تتصرف سياقات التراص مثل المجلدات التي تجمع الطبقات وتعيد ترتيبها، يجدر بنا أن نتساءل: لماذا تقوم خصائص معينة - مثل التحويل والعتامة - بإنشاء سياقات تراص جديدة؟ هذا هو الأمر: هذه الخصائص لا تنشئ سياقات مكدسة بسبب مظهرها؛ يفعلون ذلك بسبب كيفية عمل المتصفح تحت الغطاء. عندما تقوم بتطبيق تحويل، أو عتامة، أو مرشح، أو منظور، فإنك تخبر المتصفح، "مرحبًا، قد يتحرك هذا العنصر، أو يدور، أو يتلاشى، لذا كن مستعدًا!"
عند استخدام هذه الخصائص، يقوم المتصفح بإنشاء سياق تجميع جديد لإدارة العرض بشكل أكثر كفاءة. يتيح ذلك للمتصفح التعامل مع الرسوم المتحركة والتحويلات والمؤثرات المرئية بشكل مستقل، مما يقلل الحاجة إلى إعادة حساب كيفية تفاعل هذه العناصر مع بقية الصفحة. فكر في الأمر كما يقول المتصفح: "سأتعامل مع هذا المجلد بشكل منفصل حتى لا أضطر إلى إعادة ترتيب المكتب بأكمله في كل مرة يتغير فيها شيء ما بداخله". ولكن هناكتأثير جانبي. بمجرد أن يقوم المتصفح برفع عنصر ما إلى طبقته الخاصة، يجب عليه "تسوية" كل شيء بداخله، مما يؤدي إلى إنشاء سياق تكديس جديد. إن الأمر يشبه إخراج مجلد من المكتب للتعامل معه بشكل منفصل؛ يتم تجميع كل شيء داخل هذا المجلد، ويعامله المتصفح الآن كوحدة واحدة عند تحديد ما يوضع فوق ما. لذا، على الرغم من أن خصائص التحويل والعتامة قد لا يبدو أنها تؤثر على الطريقة التي تتراكم بها العناصر بصريًا، إلا أنها تفعل ذلك، وذلك لتحسين الأداء. يمكن للعديد من خصائص CSS الأخرى أيضًا إنشاء سياقات تراص لأسباب مماثلة. توفر MDN قائمة كاملة إذا كنت تريد التعمق أكثر. هناك عدد غير قليل منها، مما يوضح مدى سهولة إنشاء سياق تكديس عن غير قصد دون معرفة ذلك. مشكلة "التفكيك". يمكن أن تنشأ مشكلات التراص لأسباب عديدة، ولكن بعضها أكثر شيوعًا من البعض الآخر. تعد المكونات المشروطة نمطًا كلاسيكيًا لأنها تتطلب تبديل المكون إلى "فتح" على الطبقة العليا فوق جميع العناصر الأخرى، ثم إزالته من الطبقة العليا عندما يكون "مغلقًا". أنا واثق تمامًا من أننا جميعًا واجهنا موقفًا حيث قمنا بفتح نموذج، ولم يظهر لأي سبب من الأسباب. لا يعني ذلك أنه لم يتم فتحه بشكل صحيح، ولكنه خارج نطاق الرؤية في الطبقة السفلية من سياق التراص. وهذا يتركك تتساءل "كيف يحدث ذلك؟" منذ أن قمت بتعيين:
تراكب { الموقف: ثابت؛ /* إنشاء سياق التراص */ مؤشر z: 1؛ /* يضع العنصر في طبقة فوق كل شيء آخر */ أقحم: 0؛ العرض: 100%؛ الارتفاع: 100 فولت؛ الفائض: مخفي؛ لون الخلفية: #00000080; }
يبدو هذا صحيحًا، ولكن إذا كان العنصر الأصلي الذي يحتوي على المشغل المشروط هو عنصر فرعي داخل عنصر أصل آخر تم تعيينه أيضًا على z-index: 1، فإن ذلك يضع الشرطي تقنيًا في طبقة فرعية يحجبها المجلد الرئيسي. دعونا نلقي نظرة على هذا السيناريو المحدد واثنين من المخاطر الشائعة الأخرى في سياق التراص. أعتقد أنك لن ترى فقط مدى سهولة إنشاء سياقات مكدسة عن غير قصد، ولكن أيضًا كيفية سوء إدارتها. كما تعتمد كيفية عودتك إلى الحالة المُدارة على الموقف. السيناريو 1: الشكل المحاصر
يمكنك على الفور رؤية النموذج الخاص بك محاصرًا في طبقة منخفضة المستوى وتحديد الأصل. ملحقات المتصفح قام المطورون الأذكياء ببناء ملحقات للمساعدة. تضيف أدوات مثل ملحق Chrome "CSS Stacking context Inspector" علامة تبويب z-index إضافية إلى DevTools لتظهر لك معلومات حول العناصر التي تنشئ سياق تكديس.
ملحقات IDE يمكنك أيضًا اكتشاف المشكلات أثناء التطوير باستخدام ملحق مثل هذا الخاص بـ VS Code، والذي يسلط الضوء على مشكلات سياق التراص المحتملة مباشرةً في المحرر الخاص بك.
تفكيك واستعادة السيطرة بعد أن حددنا السبب الجذري، فإن الخطوة التالية هي التعامل معه. هناك العديد من الأساليب التي يمكنك اتباعها لمعالجة هذه المشكلة، وسوف أدرجها بالترتيب. ومع ذلك، يمكنك اختيار أي شخص على أي مستوى؛ ولا يمكن لأحد أن يشكو أو يعيق الآخر. تغيير بنية HTML ويعتبر هذا الإصلاح الأمثل. لكي تواجه مشكلة في سياق التراص، يجب أن تكون قد وضعت بعض العناصر في مواضع مضحكة داخل HTML الخاص بك. ستساعدك إعادة هيكلة الصفحة على إعادة تشكيل DOM والتخلص من مشكلة سياق التراص. ابحث عن العنصر الذي به مشكلة وقم بإزالته من عنصر الملاءمة في علامة HTML. على سبيل المثال، يمكننا حل السيناريو الأول، "The Trapped Modal"، عن طريق نقل حاوية .modal من الرأس ووضعها في عنصر
بمفرده.<فئة الرأس = "الرأس">
الرأس
<الفئة الرئيسية = "المحتوى">المحتوى الرئيسي
يحتوي هذا المحتوى على مؤشر z بقيمة 2 ولن يغطي النموذج المشروط.
عند النقر فوق الزر "فتح مشروط"، يتم وضع المشروط أمام كل شيء آخر كما يفترض أن يكون. راجع سيناريو القلم 1: الشكل المحاصر (الحل) [متشعب] بقلم شويومبو غابرييل أيوميدي. ضبطسياق التراص الأصل في CSS ماذا لو كان العنصر واحدًا لا يمكنك نقله دون كسر التخطيط؟ من الأفضل معالجة المشكلة: يقوم الوالد بتحديد السياق. ابحث عن خاصية (أو خصائص) CSS المسؤولة عن تشغيل السياق وإزالتها. إذا كان له غرض ولا يمكن إزالته، فامنح الأصل قيمة مؤشر z أعلى من العناصر الشقيقة لرفع الحاوية بأكملها. مع قيمة فهرس z أعلى، تنتقل الحاوية الأصلية إلى الأعلى، ويظهر أبناءها أقرب إلى المستخدم. بناءً على ما تعلمناه في سيناريو "القائمة المنسدلة المغمورة"، لا يمكننا نقل القائمة المنسدلة خارج شريط التنقل؛ لن يكون له معنى. ومع ذلك، يمكننا زيادة قيمة z-index لحاوية .navbar لتكون أكبر من قيمة z-index لعنصر .content. نافبار { الخلفية: #333؛ /* فهرس z: 1; */ مؤشر z: 3؛ الموقف: نسبي؛ }
ومع هذا التغيير، تظهر القائمة المنسدلة الآن أمام المحتوى دون أي مشكلة. راجع سيناريو القلم 2: القائمة المنسدلة المغمورة (الحل) [متشعبة] بواسطة Shoyombo Gabriel Ayomide. جرب البوابات، في حالة استخدام إطار عمل في أطر عمل مثل React أو Vue، تعد Portal ميزة تتيح لك عرض مكون خارج التسلسل الهرمي الأصلي العادي في DOM. تشبه البوابات جهاز النقل الآني لمكوناتك. إنها تتيح لك عرض HTML للمكون في أي مكان في المستند (عادةً في document.body مباشرة) مع إبقائه متصلاً منطقيًا بالأصل الأصلي للدعائم والحالة والأحداث. يعد هذا مثاليًا للهروب من فخ تراص السياق نظرًا لأن الإخراج المعروض يظهر حرفيًا خارج الحاوية الأصلية التي بها مشكلات. ReactDOM.createPortal( <تلميح الأداة />، document.body );
يضمن هذا عدم إخفاء محتوى القائمة المنسدلة خلف أصله، حتى إذا كان الأصل يحتوي على تجاوز: مخفي أو مؤشر z أقل. في سيناريو "تلميح الأدوات المقطوع" الذي نظرنا إليه سابقًا، استخدمت بوابة لإنقاذ تلميح الأداة من الفائض: مقطع مخفي عن طريق وضعه في نص المستند ووضعه فوق المشغل داخل الحاوية. راجع سيناريو القلم 3: تلميح الأدوات المقطوع (الحل) [متشعب] بواسطة Shoyombo Gabriel Ayomide. تقديم سياق التراص بدون آثار جانبية تهدف جميع الطرق الموضحة في القسم السابق إلى "تفكيك" العناصر من سياقات التراص الإشكالية، ولكن هناك بعض المواقف التي ستحتاج فيها بالفعل أو ترغب في إنشاء سياق تكديس. يعد إنشاء سياق تكديس جديد أمرًا سهلاً، ولكن كل الأساليب لها آثار جانبية. أي باستثناء استخدام العزل: عزل. عند تطبيقه على عنصر ما، يتم تحديد سياق التراص لأبناء هذا العنصر بالنسبة لكل طفل وضمن هذا السياق، بدلاً من التأثر بعناصر خارجه. المثال الكلاسيكي هو تعيين قيمة سالبة لهذا العنصر، مثل z-index: -1. تخيل أن لديك مكون .card. تريد إضافة شكل زخرفي يقع خلف نص البطاقة، ولكن أعلى خلفية البطاقة. بدون سياق تكديس على البطاقة، يرسل z-index: -1 الشكل إلى أسفل سياق التراص الجذري (الصفحة بأكملها). وهذا يجعلها تختفي خلف الخلفية البيضاء للبطاقة: راجع مؤشر z السلبي للقلم (مشكلة) [متشعب] بواسطة Shoyombo Gabriel Ayomide. لحل هذه المشكلة نعلن العزل: عزل على البطاقة الأم: راجع مؤشر z السلبي للقلم (الحل) [متشعب] بواسطة Shoyombo Gabriel Ayomide. الآن، يصبح عنصر .card نفسه سياقًا مكدسًا. عندما يكون العنصر الفرعي الخاص به - الشكل الزخرفي الذي تم إنشاؤه على العنصر الزائف :before - يحتوي على مؤشر z: -1، فإنه ينتقل إلى أسفل سياق التراص الخاص بالوالد. إنه موجود تمامًا خلف النص وفوق خلفية البطاقة، على النحو المنشود. الاستنتاج تذكر: في المرة القادمة التي يبدو فيها الفهرس z الخاص بك خارج نطاق السيطرة، سيكون سياق تكديس محاصرًا. المراجع
سياق التراص (MDN) الفهرس Z وسياقات التراص (web.dev) "كيفية إنشاء سياق تكديس جديد باستخدام خاصية العزل في CSS"، ناتالي بينا "ما هذا، مؤشر z؟"، جوش كومو
مزيد من القراءة على SmashingMag
"إدارة CSS Z-Index في المشاريع الكبيرة"، ستيفن فريسون "العناوين اللزجة والعناصر ذات الارتفاع الكامل: مزيج صعب"، فيليب براونين "إدارة مؤشر Z في تطبيق ويب قائم على المكونات"، بافيل بوميرانتسيف "خاصية CSS لـ Z-Index: نظرة شاملة"، لويس لازاريس
