وضع العناصر المتداخلة مع أوراق الأنماط المتتالية
أحد التحديات عند استخدام وضع CSS لتخطيط صفحات الويب هو أن بعض عناصرك قد تتداخل مع عناصر أخرى. يعمل هذا بشكل جيد إذا كنت تريد أن يكون العنصر الأخير في HTML في الأعلى ، ولكن ماذا لو لم تفعل أو ماذا لو كنت ترغب في وجود عناصر لا تتداخل في الوقت الحالي مع الآخرين لأن التصميم يستدعي هذا المظهر "ذو الطبقات" ؟ لتغيير طريقة تداخل العناصر ، يلزمك استخدام خاصية CSS.
إذا كنت قد استخدمت أدوات رسومات في Word و PowerPoint أو محرر صور أكثر قوة مثل Adobe Photoshop ، فستظهر لك فرصًا مثل z-index أثناء العمل. في هذه البرامج ، يمكنك تمييز الكائن (الكائنات) الذي قمت بسحبه ، واختيار خيار "إرسال إلى الخلف" أو "إحضار إلى الأمام" بعض عناصر المستند. في Photoshop ، ليس لديك هذه الوظائف ، ولكن لديك جزء "الطبقة" من البرنامج ويمكنك ترتيب موضع عنصر في اللوحة من خلال إعادة ترتيب هذه الطبقات. في كل من هذه الأمثلة ، تقوم بشكل أساسي بتعيين فهرس z لهذه الكائنات.
ما هو مؤشر z؟
عندما تستخدم وضع CSS لوضع العناصر على الصفحة ، يجب التفكير في ثلاثة أبعاد. هناك البعدان القياسيان: اليسار / اليمين وأعلى / أسفل. يُعرف الفهرس من اليسار إلى اليمين باسم x-index ، في حين أن أعلى إلى أسفل هو y-index. هذه هي الطريقة التي تضع بها العناصر أفقياً أو عمودياً ، باستخدام هذين الفهارس.
عندما يتعلق الأمر بتصميم الويب ، يوجد أيضًا ترتيب التراص للصفحة. يمكن وضع كل عنصر في الصفحة فوق أي عنصر آخر أو أسفله. تحدد خاصية z-index مكان كل عنصر في التكديس. إذا كان x-index و y-index هما الخطان الأفقي والعمودي ، فإن z-index هو عمق الصفحة ، وبشكل أساسي البعد الثالث.
أود أن أفكر في العناصر الموجودة على صفحة الويب كقطعة من الورق ، وصفحة الويب نفسها على هيئة صورة مجمعة. أين يمكنني تحديد الورقة من خلال تحديد المواقع ، ومقدار ما تغطيه العناصر الأخرى هو مؤشر z.
يعتبر z-index رقمًا ، إما إيجابي (على سبيل المثال 100) أو سلبي (على سبيل المثال -100). مؤشر z الافتراضي هو 0. يكون العنصر ذو أعلى فهرس z أعلى ، متبوعًا بأعلىه التالي وهكذا إلى الأسفل إلى z-index. إذا كان هناك عنصرين لهما نفس قيمة فهرسة z (أو لم يتم تعريفها ، بمعنى استخدام القيمة الافتراضية 0) ، فسيعمل المستعرض على طباعتها بالترتيب الذي تظهر به في HTML.
كيفية استخدام z-index
امنح كل عنصر تريده في مجموعتك قيمة مؤشر z مختلفة. على سبيل المثال ، إذا كان لدي خمسة عناصر مختلفة:
- العنصر 1 - z-index of -25
- العنصر 2 - z-index of 82
- عنصر 3 - لم يتم ضبط z-index
- العنصر 4 - z-index of 10
- العنصر 5 - z-index of -3
سوف تكدس بالترتيب التالي:
- العنصر 2
- العنصر 4
- العنصر 3
- العنصر 5
- العنصر 1
أوصي باستخدام قيم مؤشر z مختلفة إلى حد كبير لتكديس العناصر الخاصة بك. وبهذه الطريقة ، إذا أضفت المزيد من العناصر إلى الصفحة لاحقًا ، فسيكون لديك مساحة لطبقه دون الحاجة إلى ضبط قيم مؤشر z لكل العناصر الأخرى. فمثلا:
- 100 عن أفضل عنصر
- 0 لعنصري الأوسط
- -100 لعنصري السفلي
يمكنك أيضًا إعطاء عنصرين نفس قيمة مؤشر z. إذا تم تكديس هذه العناصر ، فسيتم عرضها بالترتيب المكتوب في HTML ، مع إضافة العنصر الأخير في الأعلى.
ملاحظة واحدة ، بالنسبة لعنصر يستخدم خاصية فهرسة z بشكل فعال ، يجب أن يكون عنصر مستوى كتلة أو استخدام عرض "block" أو "block-block" في ملف CSS الخاص بك.
المقالة الأصلية لجنيفر كرينين. تم التعديل في 12/09/16 بواسطة جيريمي جيرار.