مصدر الترجمة: مدونة Hallmaster
وثيقة فنية جيدة جدًا، مترجمة من " خاصية Z-Index CSS: نظرة شاملة " التي نشرها لويس لازاريس في 15 سبتمبر 2009. وأعتقد أنها ستساعد العديد من المتعصبين للواجهة الأمامية مثلي!
جميع حقوق الطبع والنشر محفوظة للمؤلف الأصلي.
المقال EN ليس جيدًا، وأي انتقاد مرحب به.
-------------------------------------------------- ------
معظم خصائص 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؛ ترتيب التراص الخاص بها طبيعي، أو القاعدة المركبة الافتراضية. ظاهرة التشابك سببها هوامش سلبية.