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

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

1. العرض النسبي مقابل العرض المطلق

لماذا يشغل div ذو الموضع النسبي 100% من العرض تلقائيًا، في حين أن div ذو الموضع المطلق يأخذ عرض المحتوى فقط؟

السبب هو تحديد الموضع :absolute يزيل العنصر من التدفق الطبيعي لبنية المستند. بدون تحديد العرض بشكل صريح، لا يمكن للمتصفح تحديد عرض div الذي تم تحديد موضعه بشكل مطلق. لتحقيق عرض 100%، اضبط العرض بشكل صريح: 100%.

2. الارتفاع والموضع النسبي

لماذا لا يكون لضبط الارتفاع على 100% أي تأثير على القسم ذي الموضع النسبي، لكن القسم ذي الموضع المطلق يشغل ارتفاعًا بنسبة 100%؟

عنصر ذو موضع :relative يتصرف بشكل مشابه للعنصر ذو الموضع:static من حيث ارتفاعه. وبالتالي، فإن ضبط height:100% لن يكون له أي تأثير ما لم يكن للعنصر الأصلي ارتفاع محدد. في المقابل، تتم إزالة العناصر ذات الموضع المطلق من تدفق المستند وضبط ارتفاعها بناءً على ارتفاع العنصر المحتوي عليها.

3. الهامش العلوي والتحويل

لماذا يؤدي الهامش العلوي: 30 بكسل إلى إزاحة القسم المحدد تمامًا، ولكن يتغير موضع القسم نسبيًا فقط عند استخدام الجزء العلوي: 30 بكسل؟

هذا محتمل المتعلقة بالعناصر الأصلية في بنية HTML الخاصة بك. بدون توفير كود HTML وCSS الكامل، من الصعب تحديد السبب الدقيق.

4. الموضع المطلق بدون أعلى ويسار

إذا لم تحدد top:0 و left:0 لقسم div ذو موضع مطلق، فلماذا يشغل المساحة فوق div قبله؟

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