معظم خصائص CSS سهلة الاستخدام. في كثير من الأحيان، عند استخدام خصائص CSS على عناصر لغة الترميز، تظهر النتائج فورًا عند تحديث الصفحة. تعتبر خصائص CSS الأخرى أكثر تعقيدًا ولن تعمل إلا في ظل ظروف معينة.
تنتمي سمة Z-index إلى المجموعة الأخيرة المذكورة أعلاه. مما لا شك فيه أن مؤشر Z يسبب الارتباك (التوافق) والإحباط (علم نفس المطور) بشكل متكرر أكثر من أي سمة أخرى. لكن الشيء المضحك هو أنه بمجرد أن تفهم Z-index حقًا، ستجد أنه خاصية سهلة الاستخدام للغاية، وسيوفر مساعدة قوية في حل العديد من تحديات التخطيط.
في هذه المقالة، سنشرح بالضبط ما هو مؤشر Z، ولماذا هو غير مفهوم بشكل جيد، ونناقش بعض القضايا العملية المحيطة باستخدامه. سنقوم أيضًا بوصف بعض الاختلافات التي ستواجهها بين متصفح وآخر، وهي مشكلات فريدة موجودة في الإصدارات الحالية من IE وFirefox. سيوفر هذا المنظور الشامل لسمة Z-index للمطورين أساسًا جيدًا من الثقة ومساعدة قوية عند استخدام سمة Z-index.
ما هذا؟
تحدد سمة Z-index مستوى التراص لعنصر HTML. يرتبط مستوى تراص العنصر بموضع العنصر على المحور Z (على عكس المحور X أو المحور Y). تعني قيمة مؤشر Z الأعلى أن العنصر سيكون أقرب إلى الأعلى في ترتيب التراص. يتم عرض تسلسل الطبقات هذا على طول محاور الخيط الرأسي.
لإعطاء صورة أوضح لكيفية عمل مؤشر Z، فإن الصورة أعلاه تبالغ في تحديد الموضع المرئي للعناصر المكدسة.
تسلسل الطبقات الطبيعية
في صفحة HTML، يتم تحديد ترتيب التراص الطبيعي (أي ترتيب العناصر على المحور Z) بواسطة العديد من العوامل. فيما يلي قائمة تعرض عناصر القائمة في سياق التراص (لم يتم العثور على ترجمة صينية مناسبة حتى الآن، ويجب أن تشير إلى بيئة التراص التي توجد بها العناصر المكدسة). من البيئة. لم يتم تعيين سمة Z-index لأي من العناصر الموجودة في هذه القائمة.
تعمل خلفية العنصر وحدوده على إنشاء سياق تكديس
يقتبس:
·يتم ترتيب عناصر سياقات التراص ذات القيم السالبة حسب ترتيب الظهور (كلما كان المستوى متأخرًا، زاد ارتفاعه)
·يتم ترتيب العناصر على مستوى الكتلة التي لم يتم وضعها أو تعويمها حسب ترتيب المظهر.
·يتم ترتيب العناصر العائمة غير الموضحة حسب ترتيب ظهورها.
·يتم ترتيب العناصر المضمنة حسب ترتيب ظهورها.
·يتم ترتيب العناصر المتمركزة حسب ترتيب المظهر.
تعمل خاصية Z-index، عند استخدامها بشكل صحيح، على تغيير ترتيب التراص الطبيعي.
بالطبع، ترتيب تكديس العناصر ليس واضحًا بشكل خاص ما لم يتم وضعها بحيث تتداخل مع بعضها البعض. أدناه، يظهر مربع بهوامش سلبية لتوضيح تسلسل التراص الطبيعي.
تم تعريف المربع أعلاه بألوان خلفية وحدود مختلفة، والأخيران متداخلان ويحددان هامشًا علويًا سلبيًا، حتى نتمكن من رؤية ترتيب التراص الطبيعي. الصندوق الرمادي في المركز الأول في العلامة، والصندوق الأزرق في المركز الثاني، والصندوق الذهبي في المركز الثالث. تشير الهوامش السلبية المطبقة بوضوح إلى حقيقة أن هذه العناصر لا تحتوي على مجموعة خصائص مؤشر Z؛ ترتيب التراص الخاص بها طبيعي، أو القاعدة المركبة الافتراضية. ظاهرة التشابك سببها هوامش سلبية.