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