4 أسباب لا يعمل فهرس z الخاص بك (وكيفية إصلاحها)

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

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

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

سنواجه بعض الأمثلة الفعلية للشفرة ونحلها. بعد قراءة هذه المقالة ، ستتمكن من فهم وتجنب هذه المزالق الشائعة لمؤشر z!

دعنا نتحقق من السبب الأول:

1. سيتم عرض العناصر الموجودة في نفس سياق التراص حسب المظهر ، مع وجود العناصر الأخيرة أعلى العناصر السابقة.

في المثال الأول لدينا ، لدينا تخطيط بسيط نسبيًا يتضمن 3 عناصر رئيسية:

  • صورة قطة
  • كتلة بيضاء مع النص
  • صورة أخرى لنفس القط

إليك علامة HTML لذلك:

مواء مواء مواء ...

في هذا التصميم ، نريد من الناحية المثالية أن تكون كتلة النص البيضاء أعلى القطط.

لمحاولة تحقيق ذلك ، أضفنا بعض الهوامش السلبية إلى CSS لكلا الصورتين ، بحيث تتداخل مع الكتلة البيضاء قليلاً:

.cat-top {
   الهامش السفلي: -110 بكسل ؛
}
.cat-bottom {
   تطفو: صحيح ؛
   أعلى هامش: -120 بكسل ؛
}

ومع ذلك ، يبدو مثل هذا:

يتم وضع القطة الأولى بالفعل أسفل كتلة المحتوى الأبيض ، تمامًا كما نريد. ولكن يتم وضع صورة القط الثاني على قمة الكتلة!

لماذا يحدث هذا؟

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

حتى إذا لم يكن لدى العناصر مجموعة الفهرسة z ، فهناك قافية وسبب لأي منها سيكون على القمة.

في حالتنا ، لا يحتوي أي من العناصر على قيمة z-index. لذلك يتم تحديد ترتيب التراص حسب ترتيب ظهورها. وفقًا لهذه القاعدة ، ستكون العناصر التي تأتي لاحقًا في الترميز أعلى العناصر التي تسبقها.

(يمكنك قراءة المزيد من إرشادات طلب التكديس على شبكة مطوري Mozilla هنا.)

في مثالنا مع القطط والكتلة البيضاء ، يطيعون هذه القاعدة. لهذا السبب توجد القطة الأولى أسفل عنصر الكتلة البيضاء ، والكتلة البيضاء أسفل القطة الثانية.

حسنًا ، يكون ترتيب التراص جيدًا وجيدًا ، لكن كيف يمكننا إصلاح CSS بحيث تكون القطة الثانية أسفل الكتلة البيضاء؟

لنلقِ نظرة على السبب الثاني:

2. العنصر ليس لديه مجموعة موضعه

أحد الإرشادات الأخرى التي تحدد ترتيب التكديس هي ما إذا كان عنصر ما يحتوي على موضعه أم لا.

لتعيين موضع لعنصر ، أضف خاصية موضع CSS إلى أي شيء آخر غير ثابت ، مثل نسبي أو مطلق. (يمكنك قراءة المزيد حول هذا الموضوع في هذا المقال الذي كتبته.)

وفقًا لهذه القاعدة ، سيتم عرض العناصر الموضحة أعلى العناصر غير الموضعة.

لذا ، فإن وضع الكتلة البيضاء لتكون موضعها: نسبيًا ، وترك عنصري القطتين دون وضعهما سيضع الكتلة البيضاء في أعلى القطط بترتيب التكديس.

هذه هي الطريقة التي ستبدو بها - يمكنك أيضًا اللعب مع Codepen أعلاه.

فوردعالم!

الآن ، الشيء التالي الذي نريد القيام به هو تدوير القطة السفلية رأسًا على عقب ، باستخدام خاصية التحويل. وبهذه الطريقة ، ستكون كلتا القطط تحت الكتلة البيضاء ، مع رأسها فقط.

ولكن القيام بذلك يمكن أن يسبب المزيد من الارتباك المرتبطة بمؤشر z. سنتناول المشكلة والحل في الجزء التالي.

3. سيؤدي تعيين بعض خصائص CSS مثل العتامة أو التحويل إلى وضع العنصر في سياق تكديس جديد.

كما ذكرنا للتو ، نريد تحويل القطة السفلية رأسًا على عقب. لإنجاز هذا ، سنضيف تحويل: تدوير (180 درجة).

.cat-bottom {
   تطفو: صحيح ؛
   أعلى هامش: -120 بكسل ؛
   تحويل: تدوير (180deg) ؛
}

لكن هذا يتسبب في عرض القطة السفلية أعلى الكتلة البيضاء مرة أخرى!

ما الذي يحدث هنا؟؟

قد لا تواجه هذه المشكلة غالبًا ، ولكن هناك جانب آخر لترتيب التراص وهو أن بعض خصائص CSS مثل التحويل أو العتامة ستضع العنصر في سياق تكديس جديد خاص به.

ما يعنيه هذا هو أن إضافة التحويل إلى العنصر .cat السفلي يجعله يتصرف كما لو كان لديه مؤشر z من 0. على الرغم من أنه لا يحتوي على موضعه أو تعيين مؤشر z على الإطلاق! (يحتوي W3.org على بعض الوثائق المفيدة ولكن كثيفة حول كيفية التعامل مع خاصية العتامة)

تذكر أننا لم نقم أبدًا بإضافة قيمة z-index إلى الكتلة البيضاء ، فقط الموضع: نسبي. كان هذا كافيا لوضع الكتلة البيضاء على رأس القطط غير الموضعية.

ولكن نظرًا لأن عنصر .bottom-cat يتصرف كما لو كان في موقع نسبيًا مع z-index: 0 ، فإن تحويله قد وضعه أعلى الكتلة البيضاء.

يكمن الحل في تعيين الموضع: نسبيًا وضبط مؤشر z بشكل صريح على الأقل للكتلة البيضاء. يمكنك أن تخطو خطوة إلى الأمام وتعيين موضع: مؤشر نسبي نسبي وانخفاض على عناصر القط ، فقط لتكون آمنًا جدًا.

.content__block {
   الموقف: نسبي
   مؤشر z: 2 ؛
}
.cat-top، .cat-bottom {
   الموقف: نسبي مؤشر z: 1 ؛
}

في رأيي ، سيؤدي القيام بذلك إلى حل معظم ، إن لم يكن كل ، قضايا z-index الأساسية.

الآن ، دعنا ننتقل إلى السبب الأخير لدينا وهو أن فهرس z الخاص بك لا يعمل. هذا واحد أكثر تعقيدًا بعض الشيء ، لأنه يتضمن عناصر الوالدين والطفل.

4. العنصر في سياق تكدس أقل بسبب مستوى فهرس z الأصل

دعنا نتحقق من مثال الكود الخاص بنا لهذا:

إليك ما لدينا: صفحة ويب بسيطة تحتوي على محتوى منتظم ، وعلامة تبويب جانبية وردية "إرسال تعليقات" يتم وضعها أعلى المحتوى.

ثم ، عند النقر فوق صورة القطة ، يتم فتح نافذة مشروطة مع تراكب خلفية رمادية شفافة.

ومع ذلك ، حتى عندما تكون نافذة الوسائط مفتوحة ، فإن علامة التبويب الجانبية لا تزال أعلى التراكب الرمادي. نريد أن يتم عرض التراكب على كل شيء ، بما في ذلك علامة التبويب الجانبية.

دعنا نلقي نظرة على CSS للعناصر المعنية:

.يحتوي {
   الموقف: نسبي
   مؤشر z: 1 ؛
}
.modal {
   الموقف: ثابت.
   مؤشر z: 100 ؛
}
.side-tab {
   الموقف: ثابت.
   مؤشر z: 5 ؛
}

تحتوي كل العناصر على مجموعة موضعها ، وعلامة التبويب الجانبية بها مؤشر z مكون من 5 ، والذي يضعه في أعلى عنصر المحتوى ، وهو في فهرس z: 1.

ثم ، يحتوي المشروط على مؤشر z: 100 والذي يجب وضعه في أعلى علامة التبويب الجانبية في z-index: 5. لكن بدلاً من ذلك ، يكون التراكب الشرطي أسفل علامة التبويب الجانبية.

لماذا يحدث هذا؟

في السابق ، تناولنا بعض العوامل التي تدخل في سياق التكديس ، مثل ما إذا كان العنصر يحتوي على موضعه ، وكذلك ترتيبه في الترميز.

ولكن هناك جانب آخر لسياق التراص وهو أن العنصر الفرعي يقتصر على سياق التراص الخاص بوالده.

دعونا نلقي نظرة فاحصة على العناصر الثلاثة المعنية.

إليك العلامات التي لدينا:

    

بالنظر إلى العلامات ، يمكننا أن نرى أن عناصر المحتوى وعلامة التبويب الجانبية هي أشقاء. أي أنها موجودة في نفس المستوى في الترميز (هذا يختلف عن مستوى مؤشر z). والمشرط هو عنصر فرعي لعنصر المحتوى.

نظرًا لأن المشروط داخل عنصر المحتوى ، فإن فهرس z الخاص به 100 يكون له تأثير فقط داخل العنصر الأصل ، وهو عنصر المحتوى. على سبيل المثال ، إذا كانت هناك عناصر فرعية أخرى هي أشقاء على المشروط ، فإن قيم الفهرسة z تضعهم في قمة أو تحت بعضها البعض.

لكن قيمة الفهرسة z لتلك العناصر الفرعية لا تعني أي شيء خارج الأصل ، لأن عنصر المحتوى الأصل له الفهرس العيني مضبوط على 1.

لذلك لا يمكن لأطفاله ، بما في ذلك الوسائط ، الخروج من مستوى مؤشر z.

(يمكنك أن تتذكرها باستخدام هذا الاستعارة المحبطة قليلاً: يمكن للطفل أن يكون محدودا من قبل والديه ، ولا يستطيع التحرر منه).

هناك بعض الحلول لهذه المشكلة:

الحل: انقل المشروط خارج الأصل الرئيسي للمحتوى ، وفي سياق التراص الرئيسي للصفحة.

ستبدو العلامات الصحيحة بعد ذلك كما يلي:

الآن ، العنصر الشرطي هو عنصر من عناصر الأخوة. يضع هذا العناصر الثلاثة في نفس سياق التراص مثلها ، وبالتالي فإن كل من مستويات مؤشر الفهرس z سوف تؤثر الآن على بعضها البعض.

في سياق التراص الجديد هذا ، سيتم عرض العناصر بالترتيب التالي ، من الأعلى إلى الأسفل:

  • مشروط (z-index: 100)
  • علامة تبويب جانبية (z-index: 5)
  • المحتوى (z-index: 1)

الحل البديل: قم بإزالة تحديد المواقع من المحتوى ، لذلك لن يحد من فهرس z المشروط.

إذا كنت لا ترغب في تغيير العلامة أو لا يمكنك تغييرها ، يمكنك حل هذه المشكلة عن طريق إزالة إعداد الموضع من عنصر المحتوى:

.يحتوي {
   // لا مجموعة الموقف
}
.modal {
   الموقف: مطلق ؛
   مؤشر z: 100 ؛
}
.side-tab {
   الموقف: مطلق ؛
   مؤشر z: 5 ؛
}

نظرًا لأن عنصر المحتوى لم يتم تغيير موضعه الآن ، فلن يحد من قيمة فهرس z المشروط. وبالتالي ، سيتم وضع الوسائط المفتوحة أعلى عنصر علامة التبويب الجانبية ، نظرًا لارتفاع مؤشرها z البالغ 100.

بينما يعمل هذا ، أنا شخصياً سأذهب إلى الحل الأول.

لأنه إذا كان عليك تحديد عنصر المحتوى لسبب ما في المستقبل ، فسيحدد مرة أخرى ترتيب الوسائط في سياق التراص.

باختصار

آمل أن تكون قد وجدت هذا البرنامج التعليمي مفيدًا! باختصار ، يمكن حل معظم المشكلات المتعلقة بـ z-index باتباع الإرشادات التالية:

  1. تحقق من أن العناصر لديها مجموعة موضعها وأرقام الفهرس z بالترتيب الصحيح.
  2. تأكد من عدم وجود عناصر رئيسية تحد من مستوى z-index لأطفالهم.

مصادر:

  • W3.org: الشفافية: خاصية "العتامة"
  • W3.org: تحديد مستوى المكدس
  • شبكة مطوري Mozilla: سياق التكديس
  • PhilipWalton.com: ما لم يخبرك أحد عن Z-index
  • Smashing Magazine: The Z-index CSS Property

تريد المزيد؟

more اقرأ المزيد من الدروس على مدونتي ، coder-coder.com.
اشترك هنا للحصول على رسائل البريد الإلكتروني حول المقالات الجديدة.
انضم إلى أكثر من 25000 شخص - تابعthecodercoder على Instagram.