السلام عليكم، سنرى في هذا الدرس الخاصية 'Z-INDEX' و قيمها.
ما هي الخاصية Z-INDEX ؟
الخاصية 'Z-INDEX' هي خاصية تحدد ترتيب عناصر مكدسة في نفس المكان في صفحة الويب مثل طبقات مرتبة الواحدة فوق الأخرى، أي عنصر فوق الآخر، و قد تكون هذه العناصر عبارة عن صور أو فيديوهات أو فقرات نصية أو عناوين أو أي عناصر HTML أخرى سواء كانت من نفس الصنف أو مختلطة الصنف.
قيم الخاصية Z-INDEX
لدى الخاصية 'Z-INDEX' قيمة 'AUTO' التي هي القيمة التلقائية للخاصية حيث تلعب دور التنسيق التلقائي للـ HTML، و قيمة الأرقام منها الموجبة و السالبة، و قيمتين من القيم الشاملة ألا و هما :
- 'INHERIT' : قيمة تورث للعنصر ستايل الخواص من العنصر المحتوي له، و في حالة الخاصية 'Z-INDEX'، القيمة تورث للعنصر الترتيب من العنصر المحتوي له.
- 'INITIAL' : قيمة ترجع العنصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'Z-INDEX'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، و بالتالي ترجعه إلى قيمة 'AUTO'.
الفيديو التوضيحي للدرس
إستعمال الخاصية Z-INDEX
أولاً يجب العلم أن في حالة تكدس العناصر HTML، التنسيق التلقائي للـ HTML يرتب العناصر المكدسة حسب الترتيب الذي أُقحمت به في ملفه، فالعنصر المقحم أولاً يظهر في الطبقة السفلى، ثم يظهر العنصر الذي يليه في طبقة أعلى منه، و هكذا..
يظهر العنصر الذي يحتوي على قيمة رقمية كبيرة فوق العنصر الذي يحتوي على قيمة رقمية أصغر منه، و هكذا..
تُرتَّب العناصر المتوفرة على نفس القيمة الرقمية بالتنسيق التلقائي للـ HTML فيما بينها.
يصنف الـ HTML العناصر الغير المتوفرة على الخاصية 'Z-INDEX' و العناصر المتوفرة على القيمة 'AUTO' و العناصر المتوفرة على القيمة الرقمية '0' نفس التصنيف، و بالتالي يظهرهم بتنسيقه التلقائي، حيث لا يظهر أسفلهم سوى العناصر المتوفرة على القيمة الرقمية السالبة.
ليس بالضرورة إعطاء للعناصر المراد ترتيبها بالقيم الرقمية قيم رقمية بالترتيب الرقمي (1 2 3 4 ...) لأن ما يهم الـ HTML بخصوص القيم الرقمية هو الكبر أو الصغر، و بالتالي وضعها في الطبقات العليا أو في الطبقات السفلى.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس