فهم مشكلة الهامش التلقائي للموضع المطلق

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

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

في هذا السيناريو، يتم تطبيق "margin-left: auto" و يحاول "margin-right: auto" إنشاء مساحة حول العنصر عن طريق ضبط الهوامش اليمنى واليسرى على نصف عرض العنصر. ومع ذلك، نظرًا لأن العرض المحسوب للعنصر هو 0، تصبح قيمة الهامش المحسوبة أيضًا 0. ولهذا السبب يبدو أن الهوامش ليس لها أي تأثير.

في المقابل، عند استخدام "الموضع: نسبي"، يبقى العنصر في التدفق الطبيعي للوثيقة. يتم تحديد حجمه من خلال محتواه والمساحة التي يشغلها داخل التدفق. عند تطبيق "margin-left: auto" و"margin-right: auto"، يتم حساب الهوامش بناءً على العرض الفعلي للعنصر، وهو غير صفر في هذه الحالة. لذلك، يتم تطبيق الهوامش بشكل صحيح، مما يؤدي إلى توسيط العنصر داخل العنصر الذي يحتوي عليه.

لتوسيط عنصر تم وضعه بشكل مطلق، يمكنك تحديد عرضه وارتفاعه ثم استخدام "الموضع: مطلق؛ اليسار: 50" %; تحويل: ترجمة(-50%, -50%);" لتوسيطها داخل الحاوية الخاصة بها. تقوم هذه الطريقة بوضع العنصر بدقة في الموقع المطلوب، حتى عندما يتم ضبط الهوامش على "تلقائي".