فهرس Z
فهرس Z (Z-Index) في CSS هو الخاصية التي تحدد ترتيب العناصر على المحور العمودي (أي ما يظهر أمام أو خلف عنصر آخر). يمكن تشبيه فهرس Z بترتيب الكتب في مكتبة؛ كل كتاب يحتل مكانًا معينًا على الرف، وإذا حاولت وضع كتابين في نفس المكان، فستحتاج إلى تحديد أيهما سيكون أمام الآخر. في تصميم صفحات الأخبار، يُستخدم فهرس Z لإظهار الإعلانات أو القوائم المنسدلة أمام المحتوى الرئيسي، وفي المواقع التجارية الإلكترونية يُستخدم لإظهار قوائم المنتجات أو نافذة العروض بشكل بارز. أما في الصفحات الشخصية أو بوابات الحكومة، فإنه يساعد على تنظيم العناصر التفاعلية مثل النوافذ المنبثقة أو البطاقات المعلوماتية بطريقة مرتبة بصريًا.
سيتعلم القارئ من هذا الدرس كيفية استخدام فهرس Z لتحديد تراكب العناصر (stacking order) بطريقة صحيحة، وكيفية تجنب التعارضات الناتجة عن تحديد القيم، بالإضافة إلى ربط هذه الخاصية بمفاهيم CSS الأخرى مثل الوضعية (position) والتدرج في التنظيم البصري. سنقوم بتطبيق أمثلة عملية على مواقع مختلفة لتوضيح كيفية التحكم بالعناصر المتراكبة. يمكن تشبيه تعلم فهرس Z ببناء منزل: أولًا نضع الأساس (positioning)، ثم نرتب الجدران والأثاث (stacking order) بعناية، لتكون النتيجة صفحة متناسقة ومرتبة بصريًا وسهلة الاستخدام.
مثال أساسي
css/* تحديد ترتيب العناصر باستخدام فهرس Z */
.container {
position: relative; /* ضرورة تحديد الوضعية لتفعيل Z-Index */
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1; /* هذا الصندوق سيكون خلف box2 */
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2; /* هذا الصندوق سيظهر أمام box1 */
}في المثال أعلاه، قمنا أولًا بتحديد حاوية (container) بوضعية relative لتصبح مرجعًا للعناصر الداخلية. هذه الخطوة ضرورية لأن فهرس Z لا يعمل إلا مع عناصر ذات وضعية محددة (relative, absolute, fixed, sticky). بعد ذلك أنشأنا صندوقين (box1 و box2) مع وضعية absolute لتسهيل تحديد المواقع بدقة.
صندوق box1 لديه z-index بقيمة 1، وصندوق box2 لديه z-index بقيمة 2. هذا يعني أن box2 سيظهر أمام box1 عند التداخل. لاحظ أن اللون الأحمر والأزرق ليس فقط للتوضيح، بل لتسهيل رؤية ترتيب العناصر. استخدام فهرس Z بهذا الشكل يساعد في التحكم بتراكب النوافذ، القوائم المنسدلة، أو عناصر الإشعارات على أي صفحة ويب.
للمبتدئين، من المهم معرفة أن قيمة z-index الأعلى تعني ظهور العنصر في المقدمة، ولكن يجب دائمًا التأكد من أن العنصر يمتلك position غير static، وإلا فلن تؤثر قيمة z-index على الترتيب. كما أن ترتيب العناصر داخل DOM (HTML) يؤثر أيضًا عند وجود نفس القيم، حيث يأتي العنصر الأخير في الكود فوق العناصر السابقة إذا كانت قيم z-index متساوية.
مثال عملي
css/* استخدام فهرس Z في صفحة إخبارية لإظهار نافذة تنبيه */
.news-container {
position: relative;
}
.article {
position: relative;
z-index: 1; /* المحتوى الأساسي للمقالة */
background-color: #f0f0f0;
padding: 20px;
margin: 10px 0;
}
.popup {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 100px;
background-color: yellow;
z-index: 10; /* سيظهر فوق كل المقالات */
border: 1px solid #ccc;
padding: 10px;
}في المثال العملي، قمنا بإنشاء حاوية لمقالات إخبارية (news-container) مع وضعية relative. كل مقال (article) لديه z-index = 1 ليكون خلف عناصر التنبيه أو النوافذ المنبثقة. النافذة المنبثقة (popup) تم تحديد z-index لها بقيمة 10، وهذا يضمن ظهورها فوق جميع المقالات.
توضح هذه الطريقة الاستخدام العملي لفهرس Z في المواقع الحقيقية، حيث نحتاج إلى التحكم بعناصر التراكب لتجنب تداخل محتوى الصفحة مع النوافذ المنبثقة أو القوائم العلوية. يمكن أيضًا استخدام هذه التقنية في المواقع التجارية لإبراز خصومات أو إعلانات هامة فوق قائمة المنتجات، أو في البوابات الحكومية لإظهار النماذج والتنبيهات بشكل واضح للمستخدم.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| z-index | تحديد ترتيب العنصر على المحور العمودي | z-index: 5; |
| position | تحديد وضعية العنصر لتفعيل z-index | position: absolute; |
| stacking context | سياق التراص الذي يؤثر على ترتيب العناصر | position: relative; z-index: 2; |
| auto | القيمة الافتراضية، تعتمد على DOM | z-index: auto; |
| inherit | وراثة قيمة z-index من العنصر الأب | z-index: inherit; |
خلاصة الدرس أن فهرس Z يمثل أداة أساسية للتحكم في ترتيب العناصر على الصفحة. يجب دائمًا التأكد من وضعية العناصر قبل تحديد القيم، وفهم كيفية عمل stacking context لتجنب التعارضات. استخدام هذه الخاصية بشكل صحيح يربط مباشرة مع الهيكلية في HTML والتفاعل مع JavaScript، مثل إظهار أو إخفاء عناصر معينة عند النقر أو التمرير.
بعد إتقان فهرس Z، يمكن الانتقال إلى دراسة مواضيع متقدمة مثل استخدام CSS Grid و Flexbox مع stacking context، وإدارة overlays والنوافذ المنبثقة بطريقة متقدمة. ينصح بتجربة الأمثلة على صفحات مختلفة وملاحظة تأثير تغيير قيم z-index على الترتيب البصري للعناصر لتثبيت المفاهيم عمليًا.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى