فهرس Z والسياقات المكدسة

بودكاست CSS - 019: سياقات z-index والتكديس

لنفترض أن لديك عنصرين في المكان الصحيح، ومن المفترض وضعها فوق بعضها البعض. يمكنك كتابة القليل من HTML على النحو التالي:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

ولكن أيهما يقع فوق الآخر افتراضيًا؟ لمعرفة العنصر الذي سيقوم بذلك، فأنت بحاجة إلى فهم سياقات z-index والتكديس.

مؤشر Z

z-index تحدد الخاصية بشكل صريح ترتيب طبقات HTML بناءً على المساحة ثلاثية الأبعاد للمتصفّح—المحور Z. هذا هو المحور الذي يوضح الطبقات الأقرب إليك والأبعد منك. المحور الرأسي على الويب هو المحور ص والمحور الأفقي هو المحور س.

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

في التدفق الطبيعي، إذا ضبطت قيمة معيّنة لـ z-index ولم تعمل هذه القيمة، يجب ضبط قيمة position للعنصر على أي قيمة أخرى غير static. هذا مكان شائع حيث يواجه المستخدمون صعوبات تجاه z-index.

هذا ليس هو الحال إذا كنت في سياق مرن أو شبكي، بالرغم من ذلك، لأنه يمكنك تعديل فهرس z للعناصر المرن أو الشبكة بدون إضافة position: relative.

مؤشر z سلبي

لضبط عنصر خلف عنصر آخر، يُرجى اتّباع الخطوات التالية: إضافة قيمة سلبية لـ z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

طالما أن .my-element تتضمن القيمة الأولية لـ z-index بقيمة auto، سيظهر العنصر .child خلفه.

أضف خدمة مقارنة الأسعار (CSS) التالية إلى .my-element، ولن يتوفّر العنصر .child خلفه.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

لأنّ السمة .my-element الآن تحتوي على قيمة position ليست static وقيمة z-index ليست auto، أدى إلى إنشاء سياق تكديس جديد. وهذا يعني أنّه حتى إذا ضبطت السمة .child على z-index بقيمة -999، فلن يقف خلف .my-parent.

سياق التكديس

سياق التكديس هو مجموعة من العناصر التي لها أصل مشترك وتتحرك لأعلى وأسفل المحور z معًا.

في هذا المثال، العنصر الأصلي الأول يحتوي على z-index من 1، لذلك يخلق سياق تكديس جديد. العنصر الثانوي له z-index من 999. بجانب هذا العنصر الرئيسي، يتوفّر عنصر رئيسي آخر له عنصر فرعي واحد. يحتوي العنصر الرئيسي على z-index من 2 ويحتوي العنصر الفرعي أيضًا على z-index من 2. ولأنّ كلا الوالدين ينشئان سياقًا مكدسًا، يعتمد z-index لجميع الأطفال على قيمة الوالدين.

z-index للعناصر داخل سياق التكديس دائمًا ما ترتبط بالترتيب الحالي للأهل في سياق التكديس الخاص بها.

إنشاء سياق تكديس

ليس عليك تطبيق z-index وposition لإنشاء حساب جديد. سياق التكديس: يمكنك إنشاء سياق تكديس جديد عن طريق إضافة قيمة للخصائص التي تنشئ طبقة مركبة جديدة مثل opacity وwill-change وtransform. يمكنك اطّلِع على قائمة كاملة بالمواقع الإلكترونية هنا.

لشرح ماهية الطبقة المركّبة، تخيل أن صفحة الويب هي لوحة. يستخدم المتصفح محتوى HTML وCSS الخاص بك ويستخدمهما لتحديد حجم اللوحة. ثم يرسم الصفحة على هذه اللوحة. إذا تم تغيير عنصر ما - لنفترض، يغير موضعه - فعندئذٍ يتعين على المتصفح العودة وإعادة صياغة ما يجب طلاءه.

للمساعدة في تحسين الأداء، يقوم المتصفح بإنشاء طبقات مركبة جديدة يتم وضعها فوق اللوحة. هذه تشبه إلى حد ما الملاحظات اللاصقة: فإن تحريكه وتغييره لا يكون له تأثير كبير على اللوحة بأكملها. يتم إنشاء طبقة مركبة جديدة للعناصر ذات الدالة opacity، transform وwill-change لأنّه من المرجّح جدًا أن تتغيّر هذه القيم، لكي يتأكد المتصفّح من أنّ التغيير قد يؤدي إلى نتائج جيدة قدر الإمكان من خلال استخدام وحدة معالجة الرسومات لتطبيق تعديلات النمط.

الموارد

• فرض الطبقات
• دليل الصور المتحركة: فرض إنشاء الطبقة
• فهم مؤشر z

التحقق من فهمك

اختبر معلوماتك حول مؤشر z

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>