بودكاست 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
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
ما هي المقالة التي تظهر في أعلى الصفحة بشكل تلقائي؟
إذا كان z-index لا يعمل، فما الخاصية التي يجب فحصها على العنصر؟
display
relative
animation
position
هل يحتاج flexbox والشبكة إلى position: relative
؟