ترتيب الطبقات (Z-index) في CSS
درس Position وضع الصناديق في مكانها. z-index يجيب السؤال التالي: عندما يتداخل صندوقان، أيهما أقرب للقارئ؟ فكّر بأوراق على مكتب — الورقة الأعلى تغطي ما تحتها. تعلّم القواعد اليومية قبل اختراع أرقام هائلة.
مجموعة أدوات z-index
📊 z-index بنظرة سريعة
| الفكرة | المهمة اليومية |
|---|---|
z-index |
يحدد ترتيب الرسم بين الأشقاء المتداخلين في نفس stacking context |
| Position أولًا | عادة يحتاج position غير static (أو بعض أبناء التخطيط الحديث) |
| الأكبر يفوز | الأعداد الأكبر تُرسم لاحقًا — تظهر فوق الباقي |
auto |
الافتراضي — اتبع ترتيب المستند وقواعد سياق الأب |
| Stacking context | «قفص» — الأبناء يُقارَنون فيما بينهم، لا مع الصفحة كلها |
| مقياس هادئ | فضّل خطوات صغيرة (1، 2، 10) وأدوارًا مسماة بدل سباق 9999 |
z-index لا يحرّك الصندوق يمينًا أو يسارًا. يغيّر فقط من يغطي من عندما تتقاسم الصناديق المساحة نفسها على الشاشة.
ارفع شارة فوق بطاقتها
أعطِ البطاقة منزلًا مموضعًا، ثم ارفع الشارة بـ z-index متواضع. ترتيب الأشقاء وحده قد يكفي، لكن طبقة صريحة تجعل النية مقروءة.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
غطاء فوق الصفحة
النوافذ المنبثقة والأدراج عادة تعلو المحتوى العادي. اقرن غطاءً مموضعًا برقم طبقة واضح — وأبقِ محتوى الصفحة أدنى عمدًا.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
قارن الأشقاء، لا العالم كله
بين الأشقاء في سياق واحد، يفوز z-index الأعلى. عند التعادل، الأشقاء اللاحقون في DOM يُرسمون عادة فوقًا. ابدأ المقارنة داخل أب واحد قبل مطاردة حروب على مستوى الصفحة.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
سياقات التكديس تقفص الأبناء
أب يملك stacking context خاصًا (مثلًا مموضع + z-index) قد يحبس أبناءه. ابن بـ z-index: 999 لا يقفز فوق شقيق خارج ذلك الأب إن كان الأب نفسه أدنى. أصلح طبقة الأب — لا تكتفِ بتضخيم الابن.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
عادة z-index هادئة
سمِّ الأدوار (--layer-badge، --layer-modal) أو استخدم مقياسًا صغيرًا. تجنّب 99999 إلا أثناء التصحيح. تذكّر: التموضع هو position؛ الطبقات هي z-index؛ تفريغ float ينتظر الدروس التالية.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
جرّب بنفسك
- ضع شارة absolute على بطاقة relative واضبط
z-index: 2. - ابنِ خلفية/نافذة fixed بـ
z-index: 10فوق محتوى الصفحة عند1. - أعطِ شقيقين absolute متداخلين قيم z-index مختلفة ثم بدّلهما.
- ضع ابنًا ذا z-index عالٍ داخل أب ذي z-index منخفض — راقب القفص.
- أعد كتابة «9999» إلى مقياس خاصية مخصصة مسماة.
أخطاء شائعة
- توقع أن
z-indexعلى صندوقstaticعادي يعيد ترتيب كل شيء - محاربة سياقات التكديس برفع الابن المتداخل فقط
- السباق بـ
99999بدل مقياس مقروء - معاملة هذا الدرس كـ Position (تموضع) أو Display (نوع الصندوق)
- استخدام z-index لابتكار أعمدة صفحة بدل أدوات التخطيط
الخلاصة
z-indexيتحكم بمن يُرسم فوق عندما تتداخل الصناديق- عادة يحتاج position غير static (أو حالات تخطيط خاصة)
- القيم الأعلى تفوز داخل نفس stacking context
- سياقات الأب قد تقفص الأبناء — أصلح المستوى الصحيح
- فضّل مقاييس صغيرة مسماة؛ اترك float للدروس القادمة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى