فهم واستخدام الموقف النسبي في Divi

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

في هذا المنشور سوف نغطي:

• نظرة عامة على أنواع Divi الأربعة لتحديد المواقع
• كيف الموقف النسبي "المواقف" عنصرًا في Divi
• 5 أسباب لاستخدام الوضع النسبي في Divi
• المركز النسبي مقابل الهامش
• الموقف النسبي مقابل ترجمة التحويل

تحقق من ذلك!

نظرة عامة على أنواع Divi الأربعة لتحديد المواقع

الموضع النسبي هو أحد أنواع المواضع الأربعة المتاحة في Divi. فيما يلي نظرة عامة سريعة على كل واحد أدناه.

ثابت (افتراضي)

لا يتم "وضع" العناصر الثابتة من الناحية الفنية نظرًا لأنها تظل مع التدفق الطبيعي أو ترتيب العناصر على الصفحة ، ولا تستجيب للخصائص العلوية واليمنى والسفلية واليسرى مثل العناصر الأخرى الموضوعة (ولهذا السبب لا الإزاحات متوفرة في Divi للعناصر الموجودة في الموضع الثابت / الافتراضي). في Divi ، عندما نختار الموضع الافتراضي لوحدة نمطية ، فإننا نختار الموضع الثابت. من الجدير بالذكر أيضًا أن بعض العناصر في Divi (مثل الصفوف والأقسام) سيكون لها موضع نسبي افتراضيًا (وليس الموضع الثابت).

نسبيا

العناصر الموضوعة نسبيًا هي نوع من العناصر الثابتة من حيث أنها تتبع التدفق الطبيعي للصفحة. يتمثل الاختلاف الرئيسي في أنه يمكن وضع العناصر المتوضعة نسبيًا باستخدام الخصائص العلوية والسفلية واليسرى واليمنى. أيضًا ، على عكس العناصر الثابتة ، يمكن أيضًا وضعها باستخدام خاصية Z Index.

مطلق

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

مثبت

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

ملاحظة: هناك نوع آخر من المواضع في CSS يسمى مثبت. يتصرف العنصر ذو الوضع اللاصق كعنصر ذي موضع نسبيًا حتى نقوم بالتمرير إلى الحاوية الخاصة به (في مرحلة ما تحدده القيمة العليا). ثم يصبح العنصر ثابتًا (أو عالقًا) حتى يقوم المستخدم بالتمرير إلى نهاية الحاوية. ومع ذلك ، يمكن أن يكون الوضع اللاصق غير متوقع بعض الشيء لأن العوامل الأخرى قد تمنع الوظيفة. في Divi ، لا يتوفر الخيار اللاصق ضمن الخيارات المضمنة لهذا السبب. ومع ذلك ، هناك طرق لاستخدام "position: sticky" في Divi.

كيف الموقف النسبي "المواقف" عنصر في Divi

كما هو مذكور في النظرة العامة ، يشبه نوع الموضع النسبي "الموضع" الثابت لأن العنصر يظل في التدفق الطبيعي للمستند (HTML على الصفحة). الفرق الحقيقي هو أنه بمجرد تعيين عنصر بالموضع النسبي ، أصبح لديه الآن خيارات جديدة متاحة لتحديد موضع العنصر. تتضمن هذه الخيارات الخصائص العلوية والسفلية واليسرى واليمنى بالإضافة إلى خاصية Z Index.

في Divi ، يمكن العثور على خيارات المركز الإضافية هذه ضمن مجموعة خيارات الموضع بمجرد تحديد الموضع النسبي.

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

ستعمل قيم Offset Origin و Offset معًا لوضع عنصرنا في أي مكان نريده داخل الحاوية الرئيسية. في هذا المثال ، لدينا وحدة لها موضع نسبي ، وإزاحة أعلى اليسار ، وإزاحة رأسية 25 بكسل ، وإزاحة أفقية 25 بكسل. لاحظ كيف ستحرك قيم الإزاحة العنصر بعيدًا عن أصل الإزاحة أفقياً و / أو عمودياً.

هنا نفس الوحدة مع نفس الإزاحات ولكن مع أصل إزاحة أعلى يمين.

هنا نفس الوحدة مع نفس الإزاحات وأصل الإزاحة اليمنى السفلية.

وهنا نفس الوحدة مع نفس الإزاحات وأصل الإزاحة اليسرى السفلية.

لا مفاجآت تباعد

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

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

# 1 لتقديم حاوية رئيسية للعناصر ذات المواضع المطلقة

ربما يكون هذا هو التطبيق الأكثر شيوعًا لنوع الموضع النسبي. نظرًا لأن أي عنصر تم وضعه بشكل مطلق له علاقة بأقرب سلف موضع ، يمكننا اختيار جعل أحد أسلافه عنصرًا تم وضعه ببساطة عن طريق إعطائه موضعًا نسبيًا (الموضع الثابت الافتراضي ليس "موضعيًا" تقنيًا). هذا يحافظ على تدفق المستند في مكانه (مثل ثابت) ويسمح لنا باختيار حاوية للعناصر المطلقة.

# 2 لنقل العناصر دون التأثير على العناصر الأخرى في الصفحة.

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

# 3 لاستخدام فهرس Z لتداخل العناصر الأخرى

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

# 4 لتجنب استخدام الهامش السلبي لأغراض المركز

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

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

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

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

الوضع النسبي مقابل ترجمة التحويل

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

الترجمة أفضل للرسوم المتحركة والانتقالات (مثل تأثيرات التمرير)

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

وحدات الطول النسبية تستجيب بشكل مختلف

إذا كنا نستخدم وحدات الطول النسبي (مثل٪ أو vw) للتصميم سريع الاستجابة ، فستعمل هذه الوحدات بشكل مختلف مع الموضع النسبي وتحويل الترجمة.

ستعمل وحدة Divi ذات الوضع النسبي والإزاحة الأفقية بنسبة 50٪ على تحريك الوحدة أفقيًا بمقدار يساوي 50٪ من عرض الحاوية الرئيسية (أو العمود).

ستعمل وحدة Divi مع ترجمة التحويل (المحور X) بنسبة 50٪ على تحريك الوحدة أفقيًا بمقدار يساوي 50٪ من عرض الوحدة نفسها.

الجمع بين الموضع النسبي وتحويل الترجمة إلى عناصر المركز

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

على سبيل المثال ، يمكننا استخدام الإزاحة الأفقية للموضع النسبي لوضع الوحدة على اليمين بالضبط بنسبة 50٪ من عرض العمود.

ثم استخدم خاصية translate لتحريك الوحدة بنسبة 50٪ (من عرض الوحدة) إلى اليسار. سيؤدي هذا إلى التأكد من بقاء الوحدة في وسط العمود بغض النظر عن عرض الوحدة.

افكار اخيرة

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

ما هي تجربتك مع نوع الموضع النسبي؟

أتطلع إلى الاستماع منك في التعليقات.

هتافات!