مؤشر Z

ما هو مؤشر Z 1

فهرس Z هو سمة CSS تؤثر على ترتيب التراص الرأسي لمكونات HTML المتداخلة، مما يجعلها تبدو أقرب إلى المشاهد.

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

لماذا تستخدم Z-index؟

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

تتراكم المكونات بالترتيب الذي تظهر به في DOM بدون قيمة مؤشر z. تظهر العناصر غير الثابتة دائما أعلى الموضع الثابت الافتراضي. يلعب التعشيش أيضا وظيفة مهمة. على سبيل المثال، إذا كان المكون A يجلس على المكون B، فلا يمكن أبدا أن يكون العنصر التابع للمكون B أعلى من المكون A.

خصائص مركز مؤشر Z

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

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

يعمل مؤشر Z مع قيم ستة مواضع ، كما ذكر سابقا. دعونا نلقي نظرة على كل واحد منهم.

  1. مطلق

تتم إزالة العنصر من تدفق المستند، وتعمل العناصر الأخرى كما لو أنها غير موجودة، مع تأثير جميع الخصائص الموضعية عليه.

  1. نسبي

يبقى الموضع الأصلي للعنصر في تدفق المستند، ولكن يعمل الفهرس الأيسر/الأيمن/العلوي/السفلي/z-index الآن. تشير السمات الموضعية إلى موقع العنصر "مدفوعا" في هذا الاتجاه.

  1. ثابت

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

  1. دبق

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

  1. ورث

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

كيفية استخدام Z-index في Elementor؟

في Elementor، يمكنك استخدام Z-index بالانتقال إلى قائمة الإعدادات المتقدمة لأي مكون أو عنصر وتوفير قيمة له. بمنتهى السهولة!

يرجى تذكر أنه إذا كنت تخطط لاستخدام العديد من الطبقات ، فستحتاج إلى الاحتفاظ بسجل لكل فهرس Z. يمكنك تصميم أقسام متداخلة معقدة للغاية ، كما سنرى في القسم التالي ، ولكن معرفة قيمة مؤشر Z التي يتم إعطاؤها لأي عنصر يجعل الأمور أسهل بكثير.

استنتاج

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

ومع ذلك ، فإننا في Seahawk Media نقدم أفضل الخدمات لتلبية احتياجات WordPress من البداية إلى النهاية. اتصل بنا أو تحقق من صفحة المدونة الخاصة بنا لمزيد من الرؤى.

المشاركات ذات الصلة

البحث العضوي
مسرد مصطلحات ووردبريس
كومال بوثرا

ما المقصود بالبحث العضوي؟

البحث العضوي هو عملية كسب حركة المرور إلى موقع الويب الخاص بك من خلال غير مدفوع أو

كومال بوثرا 2 فبراير، 2023

دراسة حالة: مابري للحلول التقنية

Mabry Tech هي شركة متخصصة في الاستشارات وتطوير الحلول المبتكرة للشركات. مابريس

دراسة حالة
كومال بوثرا 2 فبراير، 2023

المجال الإضافي

النطاق الإضافي هو نطاق ثانوي يمكنك إضافته إلى حساب الاستضافة الخاص بك. ملحق

استضافة مسرد المصطلحات
كومال بوثرا 2 فبراير، 2023

ما المقصود بالبحث العضوي؟

البحث العضوي هو عملية كسب حركة المرور إلى موقع الويب الخاص بك من خلال غير مدفوع أو "طبيعي"

مسرد مصطلحات ووردبريس

ابدأ مع Seahawk

اشترك في تطبيقنا لعرض أسعارنا والحصول على خصومات.