شرح CSS Positioning: الفرق بين Position Relative و Position Absolute مع أمثلة عملية
Aldawsari مقدمة إلى CSS Positioning وأهميته في تصميم الواجهات
عند بناء واجهات ويب متقدمة، لا يكفي الاعتماد على التدفق الافتراضي للعناصر داخل الصفحة. في كثير من الحالات تحتاج إلى التحكم الدقيق في موضع كل عنصر، سواء لوضع العناصر بجانب بعضها، أو تراكبها فوق بعضها، أو تثبيت جزء معين من الواجهة في مكان محدد. هنا تظهر أهمية الخاصية position في CSS، وهي من الأساسيات التي لا غنى عنها لأي مطور واجهات.
تقبل الخاصية position خمس قيم رئيسية هي: static و relative و absolute و fixed و sticky. في هذا المقال سنركز على القيمتين relative و absolute، لأن فهمهما بشكل صحيح يساعدك على بناء تخطيطات أكثر مرونة واحترافية.
كيف تعرف موضع العناصر باستخدام Chrome Developer Tools؟
من الأدوات المهمة جداً أثناء تطوير الواجهات الأمامية أداة Chrome Developer Tools. فهي لا تتيح لك فقط فحص بنية الصفحة، بل تساعدك أيضاً على معرفة القيم الفعلية المطبقة على العناصر مثل position و margin و display.
خطوات فحص قيمة position لأي عنصر
- اختر العنصر الذي تريد فحصه داخل الصفحة.
- على نظام
Windowsانقر بزر الفأرة الأيمن ثم اخترInspect. - على
Macيمكنك استخدام النقر مع الضغط علىControlثم اختيارInspect. - بعد فتح أدوات المطور، انتقل إلى تبويب
Computed. - ابحث عن الخاصية
positionمباشرة أو استخدم مربع البحث لكتابةposition.
هذه الخطوات مفيدة جداً لفهم سلوك العناصر في المواقع، خاصة عندما تعمل على مشاريع معقدة أو تحلل شيفرات موجودة مسبقاً.
ما هي القيمة الافتراضية لموضع عناصر HTML في CSS؟
القيمة الافتراضية للخاصية position في جميع عناصر HTML هي static. وهذا يعني أنه إذا لم تقم بتحديد قيمة أخرى بشكل صريح، فسيتموضع العنصر تلقائياً وفق التدفق الطبيعي للمستند document flow.
في هذا التدفق، تظهر العناصر بحسب ترتيبها داخل شيفرة HTML. أي أن العنصر المكتوب أولاً يظهر أولاً، ثم يليه العنصر التالي، وهكذا. بالنسبة إلى العناصر الكتلية مثل <div>، فإنها تُعرض عادة تحت بعضها بشكل عمودي.
مثال يوضح التمركز الافتراضي static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Positioning</title>
</head>
<body>
<div class="parent">
<div class="child one">One</div>
<div class="child two">Two</div>
<div class="child three">Three</div>
<div class="child four">Four</div>
</div>
</body>
</html>body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
في هذا المثال لم يتم تعريف الخاصية position، ولذلك استخدمت العناصر القيمة الافتراضية static. النتيجة أن كل عنصر ظهر بحسب ترتيبه داخل HTML دون أي انحراف عن التدفق الطبيعي.
المهم هنا أن خصائص الإزاحة مثل top و bottom و left و right لا يكون لها تأثير مع position: static. لذلك إذا حاولت تحريك عنصر بهذه الخصائص فقط، فلن يحدث شيء.
ما هو position: relative في CSS؟
القيمة position: relative تُبقي العنصر ضمن التدفق الطبيعي للصفحة، لكنها تمنحك القدرة على تحريكه نسبة إلى موضعه الأصلي. بمعنى آخر، العنصر يحتفظ بمكانه الأساسي في التخطيط، ثم يتم إزاحته بصرياً باستخدام خصائص مثل top و right و bottom و left.
لكن من المهم معرفة أن كتابة position: relative وحدها لا تُحدث أي تغيير مرئي. لا بد من إضافة قيمة إزاحة حتى يتحرك العنصر فعلياً.
مثال على تحريك عنصر باستخدام position relative
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
في المثال السابق، تم تحريك العنصر الأول بمقدار 50px نحو اليسار مقارنة بموضعه الأصلي. ورغم هذا التحرك البصري، بقي العنصر ضمن التدفق الطبيعي، أي أن المساحة الأصلية الخاصة به ما زالت محفوظة.
كيف تعمل خصائص الإزاحة مع relative؟
topيدفع العنصر إلى الأسفل.bottomيدفع العنصر إلى الأعلى.leftيدفع العنصر إلى اليمين.rightيدفع العنصر إلى اليسار.
قد تبدو هذه الفكرة غير بديهية في البداية، لكنها منطقية إذا تذكرت أن الخصائص تحدد المسافة من الجهة المعنية، لا اتجاه الحركة نفسه.
مثال على تغيير الترتيب البصري للعناصر
.one {
background-color: powderblue;
position: relative;
top: 150px;
}
.two {
background-color: royalblue;
position: relative;
bottom: 120px;
}
هنا تغيّر الترتيب البصري للعناصر على الشاشة، لكن ترتيب شيفرة HTML لم يتغير. هذه نقطة مهمة للغاية: relative يغير العرض البصري فقط، وليس البنية الفعلية للمستند.
متى تستخدم position relative؟
- عندما تريد تحريك عنصر قليلاً من موضعه الأصلي دون كسره من التخطيط العام.
- عندما تحتاج إلى إنشاء مرجع تموضع لعنصر داخلي يستخدم
absolute. - عندما ترغب في ضبط تراكب بسيط أو محاذاة دقيقة داخل مكوّن معين.
ما هو position: absolute في CSS؟
عند استخدام position: absolute، يتم إخراج العنصر بالكامل من التدفق الطبيعي للصفحة. وهذا يعني أن العنصر لن يحتفظ بمساحته الأصلية داخل التخطيط، كما أن العناصر المجاورة ستتصرف وكأنه غير موجود أساساً.
مثال أول على position absolute
.one {
background-color: powderblue;
position: absolute;
}
قد تبدو النتيجة هنا غريبة لأول مرة، لأن العنصر خرج من التدفق، وبالتالي أعادت بقية العناصر ترتيب نفسها وكأنه لم يعد يشغل مكانه الأصلي.
إضافة إحداثيات للعنصر المطلق
.one {
background-color: powderblue;
position: absolute;
top: 50px;
left: 0;
}
في هذه الحالة، تم تحديد موقع العنصر باستخدام الإحداثيات top و left. لكن السؤال الأهم هو: بالنسبة إلى أي عنصر تم حساب هذا الموضع؟
بالنسبة إلى ماذا يتموضع العنصر absolute؟
العنصر الذي يستخدم position: absolute يتموضع نسبة إلى أقرب عنصر أب له قيمة position ليست static. إذا لم يجد هذا الأب، فإنه يتموضع نسبة إلى الصفحة نفسها، أي إلى العنصر الجذري <html>.
ولأن العنصر الأب في المثال السابق كان يستخدم التموضع الافتراضي static، فقد تم حساب top: 50px و left: 0 نسبة إلى الصفحة كاملة، وليس إلى الحاوية .parent.
كيف تجعل العنصر absolute يتموضع داخل العنصر الأب؟
الحل هو منح العنصر الأب قيمة position: relative، مع إبقاء العنصر الداخلي على position: absolute:
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
position: relative;
}
.one {
background-color: powderblue;
position: absolute;
top: 50px;
left: 0;
}
الآن أصبح العنصر المطلق يتموضع داخل الحاوية .parent، لأن هذه الحاوية أصبحت أقرب مرجع تموضع صالح له.
الفرق بين position relative و position absolute
| النقطة | position: relative | position: absolute |
|---|---|---|
| التدفق الطبيعي | يبقى داخل التدفق | يخرج من التدفق |
| المساحة الأصلية | تبقى محفوظة | لا تبقى محفوظة |
| مرجع التموضع | موضع العنصر الأصلي | أقرب أب غير static |
| التأثير على العناصر الأخرى | لا يغير ترتيبها الفعلي | قد يغير التخطيط العام للعناصر المجاورة |
| الاستخدام الشائع | إزاحات بسيطة وإنشاء مرجع داخلي | تموضع دقيق للعناصر المتراكبة أو العائمة |
أفضل استخدام عملي للجمع بين Relative و Absolute
أحد أكثر الأنماط شيوعاً في تطوير الواجهات هو استخدام position: relative على العنصر الحاوي، ثم position: absolute على عنصر داخلي. بهذه الطريقة يمكن وضع شارة، أو أيقونة، أو زر صغير، أو نص فوق صورة بدقة عالية دون التأثير في تخطيط الصفحة بالكامل.
أمثلة شائعة على هذا الأسلوب
- إضافة شارة
Newفوق بطاقة منتج. - وضع أيقونة إغلاق داخل نافذة منبثقة.
- تمركز نص أو زر فوق صورة
Hero Section. - إظهار عدّاد إشعارات فوق أيقونة.
نصائح مهمة لتجنب الأخطاء أثناء استخدام CSS Positioning
- لا تستخدم
absoluteقبل أن تحدد بوضوح مرجع التموضع المناسب. - إذا لاحظت أن العنصر تحرك إلى مكان غير متوقع، فتحقق من أقرب عنصر أب يملك قيمة
position. - استخدم
relativeعندما تريد تحريك العنصر دون كسره من التخطيط. - تجنب الإفراط في التموضع اليدوي إذا كان من الممكن حل المشكلة باستخدام
FlexboxأوGrid. - اختبر سلوك العناصر على الشاشات المختلفة، لأن التموضع قد يتأثر بالأبعاد والمسافات.
الخلاصة التقنية
فهم position: relative و position: absolute يعد خطوة أساسية لكل مطور يعمل على تصميم الواجهات باستخدام CSS. الأولى مناسبة عندما تحتاج إلى إزاحة عنصر مع بقائه ضمن التدفق الطبيعي، أما الثانية فهي الخيار الأفضل عندما تريد تموضعاً دقيقاً خارج هذا التدفق. عملياً، أقوى استخدام لهاتين القيمتين يظهر عند الجمع بينهما: حاوية بـ relative وعنصر داخلي بـ absolute. هذا النمط يمنحك تحكماً عالياً ودقة ممتازة في بناء المكونات الحديثة داخل صفحات الويب.