فهرس 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 وتجميع البيانات.

مؤشر Z

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

كل محور يحيط بالعنصر

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

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

ومع ذلك، لا يكون ذلك صحيحًا إذا كنت تستخدم إطار flexbox أو شبكة، لأنه يمكنك تعديل الفهرس 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

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

ما هي المقالة التي تظهر في أعلى الصفحة بشكل تلقائي؟

1
إنه في الخلفية.
2
يُرجى اختيار إجابة أخرى.
3
يُرجى اختيار إجابة أخرى.
4
يوجد العنصر الأخير في المستند في الأعلى!

إذا كان z-index لا يعمل، ما الخاصية التي يجب أن تفحصها على العنصر الخاص بك؟

display
ليست الخاصية المحتملة لسبب عدم عمل مؤشر z.
relative
هذه قيمة CSS وليست خاصية.
position
تأكد من ضبط هذا الإعداد على خيار آخر غير static.
animation
ليست الخاصية المحتملة لسبب عدم عمل مؤشر z.

هل يحتاج تطبيق flexbox والشبكة إلى position: relative؟

نعم
ولا تحتاج أنواع العرض هذه إلى ذلك.
لا
ويمكنك استخدام مؤشر z داخل تنسيق flexbox أو تنسيق شبكي بدون استخدام position: relative.