CSS Academy · درس

Z-index وسياق التكديس

تحكّم في العناصر التي تظهر في المقدمة باستخدام z-index، وافهم سياقات التكديس.

Z-index وسياق التكديس درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هو z-index؟

تتحكم z-index في ترتيب تكديس العناصر ذات التموضع على المحور Z (من الأمام إلى الخلف). وتظهر القيم الأعلى فوق القيم الأقل عند تداخل العناصر.

لا يعمل z-index إلا مع العناصر المحدَّد موضعها

لا يكون لـ z-index أي تأثير على العناصر التي تستخدم position: static (وهي القيمة الافتراضية). يجب استخدام relative أو absolute أو fixed أو sticky حتى يُطبَّق z-index.

<div class="popup">Popup (position + z-index)</div>

ترتيب التراص الافتراضي

من دون تحديد z-index صراحةً، تتراص العناصر بالترتيب الآتي (من الخلف إلى الأمام):

خلفية العنصر الجذر
العناصر على مستوى الكتلة (حسب ترتيبها في التدفق)
العناصر العائمة
العناصر المضمَّنة
العناصر محدَّدة الموضع التي تستخدم z-index: auto أو 0

سياق التراص

سياق التراص هو طبقة من العناصر تشترك في المحور z نفسه. لا تتنافس قيم z-index إلا ضمن سياق التراص نفسه. ولا يمكن وضع عنصر داخل سياق تراص فوق عناصر خارجه، بغض النظر عن قيمة z-index.

ما الذي ينشئ سياق تراص؟

ينشأ سياق تراص جديد بسبب:

position مع z-index ليست قيمته auto
قيمة opacity أقل من 1
تطبيق transform أو filter أو perspective
استخدام will-change مع خصائص محددة
isolation: isolate
العناصر الفرعية لـ Flex أو Grid التي تستخدم z-index

عزل سياق التراص

استخدم isolation: isolate لإنشاء سياق تراص عمدًا من دون أي آثار مرئية. ويفيد ذلك في مكوّنات واجهة المستخدم التي تحتاج إلى احتواء طبقات z-index الخاصة بها.

<div class="modal-wrapper">Isolated stacking context</div>

مشكلة مقياس z-index

تعاني المشاريع غالبًا من «حروب z-index»، إذ يتنافس المطوّرون برفع القيم إلى 9999 أو 99999. عالج ذلك باستخدام مقياس z-index مُسمّى عبر متغيرات CSS:

<p>Custom properties define a z-index scale used across the app.</p>

z-index السالب

تضع قيم z-index السالبة العناصر خلف خلفية الكتلة الحاوية. ويمكن استخدام ذلك لطبقات عناصر زائفة زخرفية توضع خلف المحتوى.

<div class="card">Card with a decorative gradient layer behind it</div>

تصحيح مشكلات التراص

عندما تظهر نافذة modal أو تلميح tooltip خلف عنصر آخر، يكون السبب عادةً سياق تراص على عنصر أسلاف ذي z-index منخفض. استخدم 3D View في DevTools، أو تحقّق من opacity وtransform وfilter في العناصر الأصلية.

z-index في Flex وGrid

يمكن لعناصر Flex وGrid استخدام z-index مباشرةً من دون تحديد position صراحةً. ويتعامل المتصفح معها على أنها محدَّدة الموضع لغرض التراص.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

النوافذ modal الثابتة وz-index

يُفضَّل أن تكون النوافذ modal أبناءً مباشرين للعنصر <body> (أو لغلاف في المستوى الأعلى) لتجاوز سياقات التراص الخاصة بالعناصر الأسلاف. ويتولى عنصر HTML <dialog> ذلك تلقائيًا في الطبقة العليا للمتصفح.

تحقّق سريع

يستخدم عنصران متداخلان كلاهما z-index: 100، لكن ضمن سياقي تراص مختلفين لأبوين مختلفين. ما الذي يحدد أيهما يظهر في الأعلى؟

مراجعة

يتحكم z-index في تراص العناصر محدَّدة الموضع من الأمام إلى الخلف. وتعزل سياقات التراص التنافس بين قيم z-index. وأي شيء ينشئ سياق تراص على عنصر أب يمكنه حصر قيم z-index الخاصة بالعناصر الأبناء. استخدم isolation: isolate لإنشاء حدود واضحة، واستخدم متغيرات CSS لمقياس z-index.

الأسئلة الشائعة

هل درس «Z-index وسياق التكديس» مجاني؟

نعم — نص درس «Z-index وسياق التكديس» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Z-index وسياق التكديس»؟

تحكّم في العناصر التي تظهر في المقدمة باستخدام z-index، وافهم سياقات التكديس. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Z-index وسياق التكديس»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy