استخدام z-index وترتيب العناصر في CSS

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

ما هو z-index وكيف يعمل؟

الخاصية z-index تُحدد موضع العنصر على المحور z، وهو المحور الذي يتعامل مع ترتيب العناصر بشكل ثلاثي الأبعاد. بعبارة أخرى، تتحكم هذه الخاصية في أي العناصر تظهر فوق أو تحت العناصر الأخرى. يُمكن تطبيق z-index فقط على العناصر التي تم تعيين خاصية position لها بقيمة غير static، مثل relative، absolute، أو fixed.

prompt
<div style=\"position: relative;z-index: 2;background-color: red;width: 100px;height: 100px\">عنصر 1</div>
<div style=\"position: relative;z-index: 1;background-color: blue;width: 100px;height: 100px;margin-top: -50px\">عنصر 2</div>

في هذا المثال، يظهر العنصر الأحمر فوق العنصر الأزرق بسبب أن قيمة z-index الخاصة به أعلى (2 مقابل 1).

أمثلة تطبيقية على استخدام z-index

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

prompt
<div style=\"position: relative;z-index: 5;background-color: green;width: 200px;height: 50px\">القائمة</div>
<ul style=\"position: relative;z-index: 4;background-color: lightgray;margin-top: -30px\">
    <li>الخيار 1</li>
    <li>الخيار 2</li>
    <li>الخيار 3</li>
</ul>

في هذا المثال، يتم وضع القائمة المنسدلة خلف العنصر الأخضر بسبب قيمة z-index الأقل، مما يتيح للمستخدمين رؤية العنصر الأهم في المقدمة.

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