البرامج التعليمية
Claude Opus 5.5: إصلاح قوائم المنتجات المختفية خلف الترويسة
قد تختفي قائمة منتج خلف الترويسة رغم ضبط z-index: 9999.
نفّذ الفكرة باستخدام Panelly
حوّل الإلهام إلى إعلان لمنتجك
ابدأ بصورة منتج وفكرة. أنشئ إعلانًا بأربع لوحات أو مجموعة صور متناسقة أو فيديو باستخدام Panelly.
أنشئ باستخدام Panelly عدّل الطلب قبل بدء الإنشاء.
قد تختفي قائمة منتج خلف الترويسة رغم ضبط z-index: 9999. أعط Claude Opus 5.5 أنماط العناصر الأسلاف والعناصر المتداخلة، واطلب تحديد حد سياق التكديس قبل اقتراح التعديل. زيادة رقم العنصر الابن لا تخرجه من سياق أبيه.
ميّز بين الأعراض المتشابهة
يسأل نقاش مجتمعي من 2013 عن الخصائص المنشئة للسياقات. راجع القواعد الحالية في دليل MDN لسياق التكديس: التحويلات والشفافية دون 1 وبعض تركيبات التموضع وz-index تنشئ سياقات. وجود position: relative وحده لا يكفي دائما.
| العَرَض | الدليل المطلوب | اتجاه الإصلاح الأول |
|---|---|---|
| القائمة تحت ترويسة شقيقة | سياقات الأسلاف وترتيب الأشقاء | تصحيح طبقة الأب المعني |
| القائمة تنقطع عند حافة البطاقة | أنماط overflow والقص | معالجة القص منفصلا |
| القائمة الثابتة تتحرك مع بطاقة محوّلة | الكتلة الحاوية والمستطيلات | مراجعة التموضع وسلفه |
| الحوار أعلى المحتوى العادي دائما | استخدام الطبقة العليا للمتصفح | احترام نموذجها المستقل |
مثال بأبوين
افترض بطاقة متموضعة بقيمة z-index: 1 وترويسة شقيقة بقيمة 2، وداخل البطاقة قائمة بقيمة 9999. يوضح المساران التفسيران [1, 9999] و[2] أن الترويسة تتقدم عند أول حد. استبدال 9999 بـ999999 لا يغير المقارنة. يتحقق مثالنا العددي المحلي من هذا الترتيب المبسط فقط؛ ليس تنفيذا لخوارزمية رسم CSS الكاملة في المتصفح ولا اختبار إصلاح بواسطة Opus.
حدد أولا إن كانت البطاقة تحتاج سياقها. لا تزل سببا غير ضروري قبل مراجعة التأثيرات والتخطيط. إذا احتاجت القائمة عبور الحد، ففكر في وضعها بطبقة مشتركة مناسبة. يغير Portal موضع DOM، لكنه لا يصلح الإحداثيات أو القص أو الأحداث أو التركيز تلقائيا. احتفظ بالاسم الميسّر للمشغّل واختبر الفتح والإغلاق ولوحة المفاتيح بعد النقل.
مطالبة تبدأ بالدليل
افحص قائمة المنتج ومشغّلها وجميع الأسلاف حتى جذر المستند والترويسة التي تغطيها. سأقدم DOM والقيم المحسوبة للخصائص position/z-index/transform/opacity/overflow ومستطيلات الحدود.
افصل مشكلات التكديس والقص والكتلة الحاوية. حدد أول حد معني واشرح الإصلاح عبر سلسلة الأسلاف الفعلية. لا ترفع كل قيم z-index ولا تحذف جميع التحويلات.
أعد أصغر تعديل يحفظ التخطيط والحركة والأسماء الميسّرة. عند نقل الطبقة، حدد تحديث الإحداثيات والسلوك أثناء التمرير والأحداث واستعادة التركيز. اختبر العرض الضيق والواسع والتكبير والتمرير والفتح والإغلاق بلوحة المفاتيح وإعادة التركيب. علّم الاختبارات غير المنفذة كمعلّقة، ولا تدّع نجاح إصلاح المتصفح دون دليل.هذا سير عمل مقترح بالاستناد إلى دليل مطالبات Opus الرسمي، وليس معيار أداء منفذا للنموذج.
تحقّق عند الحد المعني
التقط الحالة نفسها للقائمة قبل التعديل وبعده. تحقق من ظهور القائمة المقصودة وثبات ترتيب المحتوى الآخر ومحاذاتها أثناء التمرير. افحص القص بصورة مستقلة حتى إذا نجحت مقارنة الطبقات. سجل المتصفح وحجم العرض ونتائج لوحة المفاتيح الفعلية.
**هل نستخدم أكبر رقم لكل طبقة؟** لا؛ الأرقام ذات معنى داخل سياقها. **هل النقل إلى body يضمن النجاح؟** لا؛ يبقى اختبار التموضع والتفاعل ضروريا. للسلوك المشروط، راجع دليل تركيز الحوار.
بعد تصحيح عرض المنتج، أنشئ صور حملة مرافقة في Panelly Studio. لا ندّعي أن Panelly يدمج Opus أو يصلح CSS تلقائيا.
