ربما تكون خاصية الموضع النسبي هي الأكثر غموضًا بين أنواع المواضع. ومع ذلك ، بمجرد أن نفهم كيفية عملها ، يمكننا استخدامها لصالحنا عند تصميم المخططات باستخدام Divi. سوف تتعلم أشياء جديدة في هذا البرنامج التعليمي.
في الواقع ، في هذا البرنامج التعليمي ، سنناقش:
- نظرة عامة على الأنواع الأربعة لتحديد المواقع Divi
- كيف "يضع" الموضع النسبي عنصرًا ما Divi
- 4 أسباب تبرر استخدام الموضع النسبي على Divi
- الموقف النسبي مقابل الهامش
- الموقف النسبي مقابل ترجمة المحول
عرض الأنواع الأربعة لتحديد المواقع من Divi
الموضع النسبي هو أحد أنواع المواضع الأربعة المتاحة في Divi. فيما يلي نظرة سريعة على كل منها أدناه.
ثابت (افتراضي)
من الناحية الفنية ، لا يتم "وضع" العناصر الثابتة لأنها تظل مع التدفق الطبيعي أو ترتيب العناصر على الصفحة ، ولا تستجيب للخصائص العلوية واليمنى والسفلية واليسرى مثل العناصر الأخرى الموضوعة (أي هذا هو سبب عدم توفر أي من الإزاحات في Divi للعناصر الموجودة في الوضع الثابت / الافتراضي). في Divi ، عندما نختار الموضع الافتراضي لوحدة نمطية ، نختار الموضع الثابت. وتجدر الإشارة أيضًا إلى أن بعض عناصر Divi (مثل الخطوط والأقسام) سيكون لها موضع نسبي افتراضيًا (وليس الموضع الثابت).
قريب
العناصر الموضوعة نسبيًا تشبه إلى حد كبير العناصر الثابتة من حيث أنها تتبع التدفق الطبيعي للصفحة. يتمثل الاختلاف الرئيسي في أنه يمكن وضع العناصر المتوضعة نسبيًا باستخدام الخصائص العلوية والسفلية واليسرى واليمنى. بالإضافة إلى ذلك ، على عكس العناصر الثابتة ، يمكن أيضًا وضعها باستخدام خاصية Z Index.
مطلق
يخرج العنصر الذي تم تحديد موضعه بشكل مطلق من تدفق المستند العادي ، وبالتالي لا يتم إنشاء مساحة فعلية على الصفحة للعنصر. يمكننا اعتباره عنصرًا يطفو فوق العناصر الأخرى بالصفحة ويشغل مساحة حقيقية. سيتم وضعه بالنسبة إلى أقرب حاوية رئيسية.
ثابت
مثل الموضع المطلق ، ستخرج العناصر ذات الموضع الثابت من تدفق الصفحة العادي ولن يكون لها مساحة فعلية يتم إنشاؤها على الصفحة. الفرق الرئيسي بين المطلق والثابت هو أن الموضع الثابت يتعلق بالنافذة أو نافذة المتصفح. بمعنى آخر ، بغض النظر عن مكان وجود العنصر في التدفق الطبيعي للصفحة ، بمجرد منحه موضعًا ثابتًا ، سيتم الآن ربط موضعه مباشرة بنافذة المتصفح. يمكننا استخدام الخصائص العلوية والسفلية واليسرى واليمنى لوضع العنصر في النافذة. نظرًا لأن العناصر الثابتة غالبًا ما تحوم خلف العناصر الأخرى على الصفحة أو أمامها ، سيساعد Z Index في ترتيب العناصر الثابتة فوق العناصر الأخرى.
ملاحظة: هناك نوع آخر من المواضع في CSS يسمى مثبت. يتصرف العنصر ذو الوضع اللاصق كعنصر موضوع في موضع نسبي حتى نقوم بالتمرير إلى الحاوية الخاصة به (في وقت تحدده القيمة الأعلى). ثم يصبح العنصر ثابتًا (أو عالقًا) حتى يقوم المستخدم بالتمرير إلى نهاية الحاوية. ومع ذلك ، يمكن أن يكون الوضع اللاصق غير متوقع بعض الشيء لأن العوامل الأخرى يمكن أن تمنع الوظائف. في Divi ، لا يتوفر الخيار اللاصق في الخيارات المضمنة لهذا السبب. ومع ذلك ، هناك طرق لاستخدام "position: sticky" في Divi.
كيف الموضع النسبي "المواقف" عنصر على Divi
كما هو مذكور في المعاينة ، يشبه نوع الموضع النسبي "الموضع" الثابت لأن العنصر يظل في التدفق الطبيعي للمستند. الفرق الحقيقي هو أنه بمجرد تعيين عنصر إلى الموضع النسبي ، أصبح لديه الآن خيارات جديدة متاحة لتحديد موضع العنصر. تتضمن هذه الخيارات الخصائص العلوية والسفلية واليسرى واليمنى بالإضافة إلى خاصية Z Index.
في Divi ، يمكن العثور على خيارات المركز الإضافية هذه ضمن مجموعة خيارات الموضع بمجرد تحديد الموضع النسبي.
باستخدام إزاحة مع الوضع النسبي
ستعمل قيم إزاحة الأصل وقيم الإزاحة معًا لوضع عنصرنا في المكان الذي نريده في الحاوية الرئيسية. في هذا المثال ، لدينا وحدة لها موضع نسبي ، وإزاحة أعلى يسار ، وإزاحة رأسية بمقدار 25 بكسل ، وإزاحة أفقية بمقدار 25 بكسل. لاحظ كيف ستحرك قيم الإزاحة العنصر بعيدًا عن أصل الإزاحة أفقياً و / أو عمودياً.
في ما يلي نفس الوحدة النمطية التي لها نفس الإزاحة ولكن مع أصل إزاحة أعلى اليمين
في ما يلي نفس الوحدة النمطية التي لها نفس الإزاحة وأصل الإزاحة في أسفل اليمين
وهنا هو نفس الوحدة مع نفس الإزاحة وأصل الإزاحة في أسفل اليسار.
لا تباعد مفاجئ
مع تحديد الموضع النسبي ، تظل المساحة الفعلية للعنصر في مكانها الأصلي بعد تحريك العنصر باستخدام الإزاحات (أعلى ، أسفل ، يسار ، يمين). لا يتحرك الموضع الجديد للعنصر ولا يؤثر على تباعد باقي العناصر على الصفحة. إنه يحوم بشكل أساسي فوق عناصر أخرى مثل الروح التي تركت جسدها.
لماذا استخدام الوضع النسبي
السبب 1: جعل حاوية الأصل لعناصر وضع تماما
ربما يكون هذا هو التطبيق الأكثر شيوعًا لنوع الموضع النسبي. نظرًا لأن أي عنصر تم وضعه بشكل مطلق له علاقة بأقرب سلف موضع ، يمكننا اختيار جعل أحد أسلافه عنصرًا تم وضعه ببساطة عن طريق إعطائه موضعًا نسبيًا (الموضع الثابت الافتراضي ليس كذلك من الناحية الفنية "المتمركزة"). هذا يحافظ على تدفق المستند في مكانه (مثل ثابت) ويسمح لنا باختيار حاوية للعناصر المطلقة.
السبب 2: لنقل العناصر دون التأثير على العناصر الأخرى في الصفحة.
باستخدام الموضع النسبي ، يمكننا استخدام الإزاحات لدفع العناصر إلى المحاذاة دون التأثير على العناصر الأخرى. وباستخدام Divi ، يمكننا الاستفادة من واجهة المستخدم المتحركة لوضع العناصر بصريًا في الوقت الفعلي.
السبب 3: استخدام الفهرس Z للتداخل مع العناصر الأخرى
بشكل افتراضي ، لا يمكن إعادة ترتيب العناصر الثابتة في المحور z ، إلا إذا تم إعطاؤها موضعًا نسبيًا. بمجرد أن يصبح في الموضع النسبي ، سيظل العنصر في موضعه في التدفق الطبيعي للمستند. الآن فقط لدينا إمكانية الاستفادة من فهرسة Z لوضع العناصر في ترتيب معين عندما تتداخل.
السبب 4: لتجنب استخدام الهامش السلبي لأغراض المركز
سيترك الموضع النسبي خلفه مساحة موضعه الأصلي. ومع ذلك، مع هامش سلبي، محتويات ومساحته الأصلية مشردة. على سبيل المثال، إذا أضفنا هامشًا علويًا سلبيًا إلى صف في Divi بحيث يتداخل الصف مع الصف الذي فوقه، فإن جميع الصفوف / محتويات سوف تتحرك معها. وهذا يترك القليل من الفوضى التي يجب تنظيفها والتي يمكن تجنبها باستخدام إزاحات الموضع النسبي بدلاً من ذلك.
إذا أعطينا نفس المعامل موقعًا نسبيًا ، فيمكننا استخدام الإزاحة الرأسية لرفع المقياس دون التأثير على باقي المسافات في الصفحة.
على الرغم من أنني غالبًا ما استخدمت الهامش السلبي لوضع العناصر في Divi ، فربما لا تكون فكرة جيدة إذا كان بإمكاننا استخدام الموضع النسبي بدلاً من ذلك. يتعلق الهامش بمعامل مربع العنصر ، لذلك من المفترض حقًا إضافة مسافات داخل العنصر نفسه وحوله ، وليس كثيرًا لوضع إزاحة العنصر من الحاوية الأصلية كما هو الحال بالنسبة لـ تحديد المواقع النسبي.
لتلخيص
من المحتمل جدًا أنك في النهاية لم تفهم كثيرًا. ربما يكون الجانب الأكثر إثارة للدهشة في استخدام الموضع النسبي هو تأثيره (أو تأثيره) على بقية تصميم الصفحة. لا يعمل فقط جنبًا إلى جنب مع العناصر المطلقة ، بل إنه يعمل أيضًا بشكل جيد مع التحويل المترجم لوضع العناصر في المكان المثالي.
مصدر: أنيقة ثيمات