دليل لفهم واستخدام الموقف المطلق لديفي

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

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

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

تحقق من ذلك!

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

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

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

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

نسبيا

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

مطلق

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

مثبت

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

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

كيف "يضع" الموضع المطلق عنصرًا في Divi

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

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

مزايا وعيوب استخدام الموضع المطلق في Divi

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

فوائد

فيما يلي بعض الفوائد لاستخدام الموضع المطلق على خصائص تحديد الموضع الأخرى مثل Transform Translate أو الهوامش:

أداة تصميم جيدة

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

بديل جيد للعربات والهوامش

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

دعم متصفح جيد

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

عيوب

فيما يلي بعض العيوب التي يجب مراعاتها عند استخدام الموضع المطلق:

خطر الانعزال

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

أقل استجابة

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

استخدام نقاط الموقع مع الوضع المطلق

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

بشكل افتراضي ، سيتم تعيين نقطة الموقع إلى أعلى اليسار. لذا فإن إضافة التعويضات الرأسية والأفقية إلى ذلك الموقع ستضيف مسافات إضافية من الأعلى ومن اليسار.

من موقع الزاوية اليمنى العليا ، ستضيف الإزاحة الرأسية مساحة من الأعلى وستضيف الإزاحة الأفقية مساحة إلى اليمين.

من موقع الزاوية اليمنى السفلية ، ستضيف الإزاحة الرأسية مساحة من الأسفل وستضيف الإزاحة الأفقية مساحة إلى اليمين.

من موقع الزاوية اليسرى السفلية ، ستضيف الإزاحة الرأسية مساحة من الأسفل وستضيف الإزاحة الأفقية مساحة من اليسار.

إجراء تعديلات على العناصر المطلقة المركزية

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

هذا ما يبدو عليه CSS في الخلفية.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

الجزء العلوي: يوجد 50٪ لوضع الجزء العلوي من العنصر بالضبط بنسبة 50٪ من أعلى الحاوية الخاصة به. التحويل: translateY (-50٪) موجودة لرفع العنصر لأعلى بمقدار نصف ارتفاعه بالضبط. يمنحك هذا عنصرًا في وضع مثالي بغض النظر عن الارتفاع.

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

استخدام خيار Transform Translate لوضع عناصر مطلقة متعددة للموقع المركزي

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

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

إذا أعطيت العنصر تحويلاً يترجم على النحو التالي ، فلن يتغير شيء:

• ترجمة التحويل (ص): -50٪
• ترجمة التحويل (X): -50٪

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

للقيام بذلك ، يمكنك إنشاء أربع وحدات ومنحهم جميعًا موقعًا مطلقًا مع موقع متمركز عموديًا وأفقيًا.

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

مثال لحالة الاستخدام: تحديد الموضع تمامًا للأزرار ذات الدلالات نفسها في الارتفاع

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

هيريس كيفية القيام بذلك.

أولاً ، أضف صفًا من عمود واحد إلى القسم.

ثم أضف وحدة دعاية مغالى فيها إلى العمود.

بعد ذلك ، أضف وحدة زر أسفل وحدة الدعاية.

افتح إعدادات الصف وقم بتكرار العمود مرتين للحصول على إجمالي ثلاثة أعمدة متطابقة لكل منها نفس الدعاية الدعائية ووحدة الزر.

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

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

باستخدام التحديد المتعدد ، حدد كل وحدة من وحدات الأزرار وقم بتحديث إعدادات العناصر التالية لكل زر من الأزرار:

• الموقف: مطلق
• الموقع: أسفل اليسار

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

• الحشو: 50 بكسل للأسفل

لديك الآن ثلاثة عناصر مميزة مع موضع زر ثابت لكل منها على الرغم من أن مقدار المحتوى (أو ارتفاع الدعاية المغلوطة) قد يتغير.

افكار اخيرة

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

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

هتافات!