شرح مؤشر Z: كيفية تكديس العناصر باستخدام CSS

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

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

ترتيب التراص الافتراضي

دعنا نذكر أولاً الترتيب الافتراضي الذي يكدس فيه المتصفح العناصر ، عند عدم تطبيق z-index:

  1. عنصر الجذر (العنصر)
  2. العناصر غير الموضوعة بالترتيب المحدد لها
  3. العناصر الموضوعة بالترتيب المحدد لها

العنصر غير الموضع هو عنصر له قيمة الموضع الافتراضي ثابتة. العنصر الموضع هو عنصر له أي قيمة موضع أخرى. من أمثلة القيم الأخرى: مطلق أو نسبي أو ثابت أو ثابت.

لغة البرمجة:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

حددنا المربع الأخضر في آخر المستند. لا يزال ، يظهر خلف الآخرين لأنه غير متمركز.

التراص مع z-index

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

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

يتم عرض المربع البرتقالي الذي يحتوي على مؤشر z أعلى أمام المربع الأزرق.

سياق التراص

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

لغة البرمجة:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

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

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

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

إذا أردنا أن يكون المربع الأزرق والمربع البرتقالي جزءًا من نفس سياق التراص ، فيمكننا تعريف المربع الأزرق كعنصر فرعي من المربع الوردي. سيؤدي ذلك إلى ظهور المربع الأزرق خلف المربع البرتقالي.

لا يتم تكوين سياقات التراص عند تطبيق مؤشر z على عنصر فقط. هناك العديد من الخصائص الأخرى التي تجعل العناصر تشكل سياقات التراص. بعض الأمثلة هي: عامل التصفية والتعتيم والتحويل.

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

لغة البرمجة:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

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

ملخص

باستخدام z-index في العناصر الموضوعة ، يمكننا تغيير ترتيب التكديس الافتراضي.

عند تطبيق خصائص CSS معينة ، يمكن أن يشكل عنصر سياق تكديس. قيم مؤشر Z لها معنى فقط في نفس سياق التراص.

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

شكرا للقراءة! :)