تحديد المواقع ومؤشر العمق

تحديد المواقع ومؤشر العمق في Tailwind CSS

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

خاصية الموضع

تحدد خاصية الموضع كيفية وضع العنصر في المستند. يوفر Tailwind أدوات لجميع قيم موضع CSS:

<!-- ثابت (افتراضي) -->
<div class="static">
    تحديد موضع ثابت (تدفق المستند العادي)
</div>

<!-- نسبي -->
<div class="relative">
    تحديد موضع نسبي (يمكن استخدام أعلى/يمين/أسفل/يسار)
</div>

<!-- مطلق -->
<div class="relative">
    <div class="absolute top-0 right-0">
        تحديد موضع مطلق (موضع نسبة لأقرب سلف موضع)
    </div>
</div>

<!-- ثابت -->
<div class="fixed top-0 left-0">
    تحديد موضع ثابت (بالنسبة لنافذة العرض)
</div>

<!-- لاصق -->
<div class="sticky top-0">
    تحديد موضع لاصق (يتبدل بين نسبي وثابت)
</div>

تحديد الموضع النسبي

يسمح لك تحديد الموضع النسبي بإزاحة عنصر من موضعه العادي مع الحفاظ على مساحته في تدفق المستند:

<!-- تحديد موضع نسبي أساسي -->
<div class="relative">
    هذا العنصر له موضع نسبي
</div>

<!-- إزاحة من الموضع العادي -->
<div class="relative top-4 left-8">
    تم نقله 16px لأسفل و 32px لليمين من الموضع العادي
</div>

<!-- أب نسبي للأطفال المطلقين -->
<div class="relative bg-gray-100 p-8">
    <p>حاوية الأب</p>
    <span class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded text-xs">
        شارة
    </span>
</div>

<!-- بطاقة مع تحديد موضع نسبي للشارات -->
<div class="relative bg-white border border-gray-200 rounded-lg p-6">
    <div class="absolute -top-3 -right-3 bg-red-500 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
        3
    </div>
    <h3 class="font-bold">عنوان البطاقة</h3>
    <p class="text-gray-600 mt-2">يذهب محتوى البطاقة هنا</p>
</div>

تحديد الموضع المطلق

يزيل تحديد الموضع المطلق عنصراً من تدفق المستند ويضعه بالنسبة لأقرب سلف موضع له:

<!-- تحديد موضع الزاوية -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute top-0 left-0 bg-blue-500 text-white p-2">أعلى اليسار</div>
    <div class="absolute top-0 right-0 bg-green-500 text-white p-2">أعلى اليمين</div>
    <div class="absolute bottom-0 left-0 bg-yellow-500 text-white p-2">أسفل اليسار</div>
    <div class="absolute bottom-0 right-0 bg-red-500 text-white p-2">أسفل اليمين</div>
</div>

<!-- عنصر في المركز -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-white px-6 py-3 rounded">
        في المركز تماماً
    </div>
</div>

<!-- تراكب كامل -->
<div class="relative h-64 bg-gray-100">
    <img src="image.jpg" class="w-full h-full object-cover" alt="خلفية">
    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <h2 class="text-white text-3xl font-bold">نص التراكب</h2>
    </div>
</div>

<!-- زر إغلاق للنافذة المنبثقة -->
<div class="relative bg-white rounded-lg shadow-xl p-6">
    <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
        <svg class="w-6 h-6"><!-- أيقونة X --></svg>
    </button>
    <h3 class="text-xl font-bold">عنوان النافذة المنبثقة</h3>
    <p class="text-gray-600 mt-2">محتوى النافذة المنبثقة</p>
</div>

أدوات الإدراج

توفر أدوات الإدراج اختصاراً لتعيين خصائص موضع متعددة في آن واحد:

<!-- inset-0 = top:0, right:0, bottom:0, left:0 -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute inset-0 bg-blue-500 bg-opacity-50">
        يغطي الأب بأكمله
    </div>
</div>

<!-- inset-x = اليسار واليمين -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute inset-x-0 top-0 h-16 bg-blue-500">
        يمتد على العرض الكامل في الأعلى
    </div>
</div>

<!-- inset-y = الأعلى والأسفل -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute inset-y-0 left-0 w-16 bg-green-500">
        يمتد على الارتفاع الكامل على اليسار
    </div>
</div>

<!-- إدراج مع تباعد -->
<div class="relative h-64 bg-gray-100">
    <div class="absolute inset-4 bg-purple-500 bg-opacity-50 rounded">
        هامش 16px على جميع الجوانب
    </div>
</div>

<!-- صورة مع تراكب متدرج -->
<div class="relative h-96 rounded-lg overflow-hidden">
    <img src="hero.jpg" class="absolute inset-0 w-full h-full object-cover" alt="بطل">
    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
    <div class="absolute inset-x-0 bottom-0 p-8">
        <h1 class="text-white text-4xl font-bold">عنوان البطل</h1>
        <p class="text-white text-lg mt-2">وصف البطل</p>
    </div>
</div>

تحديد الموضع الثابت

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

<!-- رأس ثابت -->
<header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <nav class="container mx-auto px-4 py-4">
        <!-- محتوى التنقل -->
    </nav>
</header>

<!-- تذييل ثابت -->
<footer class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-4">
        <!-- محتوى التذييل -->
    </div>
</footer>

<!-- زر إجراء عائم -->
<button class="fixed bottom-8 right-8 bg-blue-500 hover:bg-blue-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center">
    <svg class="w-6 h-6">+</svg>
</button>

<!-- لافتة موافقة ملفات تعريف الارتباط -->
<div class="fixed bottom-0 inset-x-0 bg-gray-900 text-white p-4">
    <div class="container mx-auto flex items-center justify-between">
        <p>نحن نستخدم ملفات تعريف الارتباط لتحسين تجربتك.</p>
        <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded">قبول</button>
    </div>
</div>

<!-- أداة الدردشة الجانبية -->
<div class="fixed bottom-4 right-4 w-80 bg-white rounded-lg shadow-2xl">
    <div class="bg-blue-500 text-white p-4 rounded-t-lg">
        <h3 class="font-bold">تحدث معنا</h3>
    </div>
    <div class="p-4 h-96 overflow-y-auto">
        <!-- رسائل الدردشة -->
    </div>
</div>

تحديد الموضع اللاصق

تحديد الموضع اللاصق هو مزيج من تحديد الموضع النسبي والثابت. يكون العنصر نسبياً حتى يصل إلى عتبة التمرير، ثم يصبح ثابتاً:

<!-- رأس لاصق -->
<header class="sticky top-0 bg-white shadow-md z-50">
    <nav class="container mx-auto px-4 py-4">
        <!-- التنقل الذي يلتصق بالأعلى عند التمرير -->
    </nav>
</header>

<!-- شريط جانبي لاصق -->
<div class="flex gap-8">
    <aside class="w-64 sticky top-20 self-start">
        <!-- شريط جانبي يلتصق 20px من الأعلى -->
        <nav class="space-y-2">
            <a href="#" class="block p-2 hover:bg-gray-100 rounded">الرابط 1</a>
            <a href="#" class="block p-2 hover:bg-gray-100 rounded">الرابط 2</a>
        </nav>
    </aside>
    <main class="flex-1">
        <!-- المحتوى الرئيسي -->
    </main>
</div>

<!-- رأس جدول لاصق -->
<div class="overflow-auto max-h-96">
    <table class="w-full">
        <thead class="sticky top-0 bg-gray-100">
            <tr>
                <th class="px-4 py-2">العمود 1</th>
                <th class="px-4 py-2">العمود 2</th>
            </tr>
        </thead>
        <tbody>
            <!-- صفوف الجدول -->
        </tbody>
    </table>
</div>

<!-- رؤوس الأقسام اللاصقة -->
<div class="space-y-8">
    <section>
        <h2 class="sticky top-0 bg-white py-4 text-2xl font-bold border-b">القسم 1</h2>
        <!-- محتوى القسم -->
    </section>
    <section>
        <h2 class="sticky top-0 bg-white py-4 text-2xl font-bold border-b">القسم 2</h2>
        <!-- محتوى القسم -->
    </section>
</div>

مؤشر العمق

يتحكم مؤشر العمق في ترتيب التكديس للعناصر الموضعة. تظهر القيم الأعلى أمام القيم الأقل:

<!-- طبقات مؤشر العمق الأساسية -->
<div class="relative h-64">
    <div class="absolute inset-0 bg-blue-500 z-10">الطبقة 1 (z-10)</div>
    <div class="absolute inset-4 bg-green-500 z-20">الطبقة 2 (z-20)</div>
    <div class="absolute inset-8 bg-red-500 z-30">الطبقة 3 (z-30)</div>
</div>

<!-- قيم مؤشر العمق في Tailwind -->
<div class="z-0">z-index: 0</div>
<div class="z-10">z-index: 10</div>
<div class="z-20">z-index: 20</div>
<div class="z-30">z-index: 30</div>
<div class="z-40">z-index: 40</div>
<div class="z-50">z-index: 50</div>
<div class="z-auto">z-index: auto</div>

<!-- تراكب النافذة المنبثقة مع مؤشر العمق المناسب -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40">
    <div class="fixed inset-0 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-8 max-w-md">
            <h2 class="text-2xl font-bold">عنوان النافذة المنبثقة</h2>
            <p class="mt-4">محتوى النافذة المنبثقة</p>
        </div>
    </div>
</div>

<!-- قائمة منسدلة -->
<div class="relative">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">القائمة</button>
    <div class="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">العنصر 1</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">العنصر 2</a>
    </div>
</div>

أنماط تحديد المواقع العملية

رأس لاصق مع محتوى

<!-- تخطيط صفحة كاملة مع رأس لاصق -->
<div class="min-h-screen">
    <!-- رأس لاصق -->
    <header class="sticky top-0 bg-white border-b border-gray-200 z-50">
        <div class="container mx-auto px-4">
            <nav class="flex items-center justify-between py-4">
                <div class="text-2xl font-bold">الشعار</div>
                <div class="flex gap-6">
                    <a href="#" class="hover:text-blue-600">الرئيسية</a>
                    <a href="#" class="hover:text-blue-600">حول</a>
                    <a href="#" class="hover:text-blue-600">اتصل</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- المحتوى الرئيسي -->
    <main class="container mx-auto px-4 py-8">
        <!-- محتوى الصفحة -->
    </main>
</div>

نافذة منبثقة تراكبية

<!-- تراكب النافذة المنبثقة (مخفي افتراضياً، يظهر مع JavaScript) -->
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!-- تراكب الخلفية -->
    <div class="fixed inset-0 bg-black bg-opacity-75 transition-opacity"></div>

    <!-- حاوية النافذة المنبثقة -->
    <div class="flex min-h-full items-center justify-center p-4">
        <!-- محتوى النافذة المنبثقة -->
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-lg">
            <!-- زر الإغلاق -->
            <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-10">
                <svg class="w-6 h-6">×</svg>
            </button>

            <!-- جسم النافذة المنبثقة -->
            <div class="p-6">
                <h3 class="text-2xl font-bold text-gray-900" id="modal-title">
                    عنوان النافذة المنبثقة
                </h3>
                <div class="mt-4">
                    <p class="text-gray-600">يذهب محتوى النافذة المنبثقة هنا</p>
                </div>
            </div>

            <!-- تذييل النافذة المنبثقة -->
            <div class="bg-gray-50 px-6 py-4 flex justify-end gap-3">
                <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">
                    إلغاء
                </button>
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                    تأكيد
                </button>
            </div>
        </div>
    </div>
</div>

العناصر العائمة

<!-- زر الإجراء العائم (أسفل اليمين) -->
<button class="fixed bottom-8 right-8 bg-blue-500 hover:bg-blue-600 text-white w-16 h-16 rounded-full shadow-2xl flex items-center justify-center z-50 transition-transform hover:scale-110">
    <svg class="w-8 h-8">+</svg>
</button>

<!-- إشعار منبثق (أعلى اليمين) -->
<div class="fixed top-4 right-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4 max-w-sm z-50">
    <div class="flex items-start gap-3">
        <svg class="w-6 h-6 text-green-500 flex-shrink-0">✓</svg>
        <div class="flex-1">
            <h4 class="font-semibold text-gray-900">نجاح!</h4>
            <p class="text-sm text-gray-600 mt-1">تم حفظ التغييرات الخاصة بك.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5">×</svg>
        </button>
    </div>
</div>

تلميحات الأدوات

<!-- تلميح أداة (يظهر عند التمرير مع JavaScript) -->
<div class="relative inline-block">
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        مرر فوقي
    </button>
    <!-- محتوى تلميح الأداة (مخفي افتراضياً) -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded whitespace-nowrap opacity-0 invisible hover:opacity-100 hover:visible transition-all z-50">
        نص تلميح الأداة
        <!-- سهم -->
        <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
    </div>
</div>

<!-- تلميح أداة على اليمين -->
<div class="relative inline-block">
    <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
        معلومات
    </button>
    <div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded whitespace-nowrap z-50">
        معلومات إضافية
    </div>
</div>

الملخص

في هذا الدرس، تعلمت عن تحديد المواقع ومؤشر العمق في Tailwind CSS:

• أنواع المواضع: static، relative، absolute، fixed، sticky
• تحديد الموضع النسبي: إنشاء سياق تحديد موقع للأطفال المطلقين
• تحديد الموضع المطلق: وضع العناصر بالنسبة لأقرب سلف موضع
• أدوات الإدراج: اختصار لتحديد الموضع على جوانب متعددة
• تحديد الموضع الثابت: تبقى العناصر في نافذة العرض أثناء التمرير
• تحديد الموضع اللاصق: سلوك هجين يتبدل بين نسبي وثابت
• مؤشر العمق: التحكم في ترتيب التكديس بقيم من 0 إلى 50
• الأنماط العملية: رؤوس لاصقة، نوافذ منبثقة، أزرار عائمة، تلميحات أدوات

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