يكشف مفتش الفهرس الترتيب الكامل لتكديس العناصر على صفحة الويب. كل عنصر يحمل قيمة Z-Index يتم إبرازه وتصنيفه مباشرة فوق الصفحة، بينما تقوم لوحة تخطيطية لعرض الطبقات مرتبة من الأسفل للأعلى (bottom to top). كما يتعرف على طبقات التكديس المولدة بواسطة الوقع (position) أو التحويل (transform) أو الشفافية (opacity) لتبديل عمليات كشف وتصحيح ترتيب العناصر (z-index debugging) مرئية وواضحة.
أخطاء Z-index هي من بين أكثر مشاكل CSS إحباطاً. أحياناً يختفي مربع حواري (modal) كان يجب أن يظهر فوق كل شيء خلف شريط جانبي. وتختفي قائمة منسدلة خلف القسم التالي. وتظل أداة التلميح (tooltip) مخفية بسبب عنصر أب أنشأ سياق تكديس لم يكن في الحسبان. السبب الجذري غالباً هو سوء فهم لكيفية عمل سياقات التكديس — وأدوات المطور في المتصفح (DevTools) لا توفر أي مساعدة مرئية بشأنها. مفتش مسار الطبقات يجعل غير المرئي مرئياً. يحصل كل عنصر يحمل z-index واضح على غطاء ملون وتسمية توضح قيمته. تسرد لوحة تموضع الطبقات جميع قيم z-index مرتبة من أقل قيمة (القاع) إلى أعلى قيمة (القمة)، موصحة أي صنف CSS أو عنصر تعود إليه القيم. والأهم، تكشف الأداة عن حدود سياق التكديس — العناصر التي تنشئ سياقات تكديس جديدة عبر position + z-index، و transform، و opacity < 1، و filter، و will-change، أو isolation. فهم العنصر الأب الذي أنشأ سياق التكديس هو المفتاح عادةً لإصلاح أعطال التصميم بـ z-index.
يحصل كل عنصر بقيمة z-index على طبقة نصف شفافة ملونة وشارة توضح رقم الـ z-index الخاص به. تأخذ القيم الأكبر ألواناً دافئة (كالأحمر)، في حين تُعطى القيم الأدنى ألواناً باردة (كالأزرق). هذا التسلسل الطبقي المرئي يسهل فهم تسلسل التكديس ببداهة في الحال.
تسرد لوحة جانبية جميع قيم z-index الموجودة في الصفحة، مصنفة من الأعلى وصولاً للأسفل. يقدم كل مُدخل قيمة الـ z-index ومحدد CSS الخاص بها (selector أو class) وخاصية الموضع (position). انقر على أي مُدخل باللوحة ليبرز لك العنصر الموافق داخل الصفحة.
تحدد الأداة كل حد وسياق تكديس على الصفحة مع خصائص CSS المتسببة بإنشائه — كـ position: relative/absolute مصحوبًا بـ z-index، أو transform، أو opacity < 1، وغيرها. هذه تُسرد مفصولة كي تتمكن من تتبع لماذا تغدو قيمة ترتيب الطبقات غير متجاوبة لما ينبغي.
انقر على أي طبقة داخل اللوحة ليتم تحديد الجزء المعني والتمرير إليه داخل الصفحة. أو، يمكنك أيضاً النقر فوق أي من العناصر المحددة داخل الواجهة للاستدلال على أصل طبقته داخل اللوحة المنظمة للطبقات. يمكنك تصفح الترتيب بالاتجاه الذي يبدو أسهل لك.
يوضح كل مُدراج في الطبقة قيمة الخصائص الخاصة بالعنصر (static, relative, absolute, fixed, sticky) ولأن z-index يتم تفعيله حصراً للعناصر الموضعية. تستطيع كشف أخطاء من قبيل اختيار z-index بينما قيم position للعنصر بقيت ثابتة (static).
لأي عنصر مختار، استعرض كافة التسلسل الشجري الذي تولّد به التكديس متجهاً لأصله الرئيسي صعودًا. استوعب التفرع الأصلي المُقيّد لتغطية ونطاق عمل الطبقات — المطلب الأصيل والمقصود وراء إصلاح أعطال Z-index في كل مرة.
نافذة حواري بطبقة z-index: 9999 متخفية أسفل إطار جانبي من فئة z-index: 10! السبب بسيط ويعود لإعطاء أصل النافذة position: relative وقيمته z-index: 1 وأما أصل الجانب كانت 2. يستحيل هنا هروب أي نافذة لمكون أعلى من سقف مسار أصولها وستراها مبينة بوضوح.
القائمة تختفي عند فتحها في الجانب المتأخر عنها. سيستكشف المُفتش إذا أُعطى لغطاء القائمة المنسدلة خاصية overflow: hidden (والذي سينشئ فضاءً متكدساً) وتكون الرؤى البصرية كفيلة بحل الإشكال بومضة عين.
بمرور الوقت، تُراكم القيم: 10، 100، 999، 99999 متكدسة. تبين لوحة الطبقات كل مسار وتدعم التنقيح بإيضاح لتصبح سهلة التغيير وتتبسط وفق سلم سوي ومعياري طبيعي مثل (1, 2, 10, 100).
تبويبات الاتصال السريع، بنود الخصوصية ومراقبات المشاهدات والتي تسبغ بأعداد فلكية. يتخذ من المفتش جلاء تاماً للقيم المُدخلة ليساعد على الموزانة وتخطيط الإدخال لتجنب اختلاط التصاميم ببعضها.
شاهد وتعرّف بتدقيق على مساق التكديسات بالشبكة لاستقصاء أي حشوات دون طائل من الفلاتر والشفافية والتلاعب المحدث لخصائص الشكل دون دراية مؤثراً بمنحى عام لأصول z-index وبموضعات أخرى. كل هذا مسجل داخل لائحة السياقات لاستعراضها بوضوح.
افتح لوحة الـ DevSuite Pro العائمة واضغط على مفتش فهرس الـ Z-Index. ستبدأ الأداة بفحص الصفحة لتحديد كامل العناصر الحاملة لمعايير الطبقات مع تشخيص لحدود ومنابع سياق التكديس المتراكمة.
تتلون الطبقات ذات قيم الـ Z-Index بمؤشرات وعلامات مرئية، حاملة أرقامها الدالة عليها. وتأخذ القيم العليا لمعاناً بألوان أكثر دفئاً بينما تُزين الأخرى بألوان باردة.
افتح اللوحة الجانبية لترى سجل كامل بالطبقات المتراكمة ومفصلة من القمة إلى الأسفل مصحوبة بالقيمة والأصناف ومواضع الخاصية لضبطها وتصحيحها.
قسم "سياقات التكديس" بالقائمة يشير إلى كامل العناصر المحددة بتراكم لطبقاتها، مصحبة بتفصيل لخصائص CSS المسؤولة عن ذلك العطب، حيث تكمن أغلب التوضيحات للخطأ.
عبر النقر بداخل أي مُكون يمكن قراءة مسارات وسياقات طبقاته القديمة — ولأي الأصول تأثر بها الترتيب الخاص ببنية الظهور. استمر بمطاردة هذا التسلسل للاستدلال للمُستند الجذري المُؤثر في التشكيل.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
