الموضع المطلق مقابل الموضع النسبي: الخوض في الأبعاد والموضع

في تصميم الويب، يعد فهم مفاهيم الموضع المطلق والنسبي أمرًا بالغ الأهمية. في حين أن كلا التقنيتين تسمحان بوضع العناصر بدقة، إلا أنهما تظهران سلوكيات مميزة من حيث العرض والارتفاع والموضع.

1. اختلافات العرض

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

2. اعتبارات الارتفاع

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

3. تأثيرات الهامش والحشو

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

4. المواضع العلوية واليسرى الافتراضية

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