كيف تعمل خاصية CSS Position؟ شرح احترافي مع أمثلة برمجية

6 min read Aldawsari
دقائق القراءة: 6

مقدمة إلى خاصية position في CSS

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

صورة توضيحية لمقال يشرح خاصية position في CSS مع أمثلة برمجية

في هذا الدليل، سنتعرف على القيم الأساسية لخاصية position، وكيفية استخدام الخصائص المساعدة مثل top وbottom وleft وright، مع أمثلة عملية تسهّل عليك تطبيق الفكرة في مشاريعك.

ما هي خاصية position في CSS؟

تحدد خاصية position الطريقة التي يتم بها تموضع العنصر داخل المستند أو داخل الحاوية الأب. وعند استخدامها مع خصائص الإزاحة مثل top وleft وright وbottom، يصبح بالإمكان تحريك العنصر من موضعه الافتراضي أو تثبيته في مكان معين.

مخطط يوضح مفهوم خاصية position في CSS

عند الاعتماد على Flexbox أو Grid، يمكنك بناء تخطيطات مرتبة ومنظمة بدقة عالية. لكن هذه الأدوات غالباً تعمل ضمن حدود المحورين X وY، أي أن حركة العناصر تبقى مرتبطة بالنظام العام للتخطيط.

مثال لتخطيط موقع متماثل باستخدام Flexbox

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

مثال لتخطيط موقع غير متماثل باستخدام Grid وpositionرسم يوضح تموضع العناصر وفق المحورين X وY في التخطيط التقليدي

في التخطيط التقليدي، تتحرك العناصر ضمن قيود واضحة. لكن مع position، يمكن فصل العنصر عن تدفق الصفحة جزئياً أو كلياً بحسب القيمة المستخدمة.

رسم يوضح تخطيطاً حراً للعناصر باستخدام خاصية position في CSS

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

مثال لتصميم موقع غير متماثل يعتمد على خاصية position

إعداد المشروع وتجهيز البيئة

يمكنك استخدام أي محرر أكواد يدعم إضافة Emmet. كما يمكن تنفيذ الأمثلة عبر منصات مثل CodePen.

صورة توضح بيئة إعداد مشروع CSS لتجربة خاصية position

هيكل HTML الأساسي

داخل الصفحة، أنشئ عنصراً بسيطاً بهذا الشكل:

<div class="box-1"></div>

إعادة ضبط التنسيق الافتراضي

من الجيد حذف الهوامش والمسافات الافتراضية للمتصفح قبل البدء:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

تنسيق العنصر .box-1

.box-1 {
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
}

القيم الأساسية لخاصية position هي:

  • static
  • relative
  • absolute
  • fixed
  • sticky

أما الخصائص المستخدمة لتحريك العنصر فهي:

  • top
  • bottom
  • left
  • right

رسم يوضح خصائص top وbottom وleft وright لتحريك العناصر في CSS

ما هي القيمة static في CSS؟

القيمة static هي الوضع الافتراضي لكل العناصر في الصفحة. عندما يكون العنصر بهذه القيمة، فإنه يتبع التدفق الطبيعي للمستند، وغالباً لا تستجيب معه خصائص الإزاحة مثل top وleft بالشكل المتوقع.

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

صورة توضح الموضع الافتراضي static لجميع عناصر CSS

الفرق بين relative وabsolute في CSS

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

  • relative: يحافظ العنصر على مكانه الأصلي في تدفق الصفحة، ثم يتحرك نسبةً إلى موضعه الأصلي.
  • absolute: يخرج العنصر من التدفق الطبيعي، ويتموضع نسبةً إلى أقرب عنصر أب يملك قيمة position غير static.

مقارنة بين relative وabsolute في CSS

تجربة القيمة relative

جرّب الكود التالي:

.box-1 {
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
  position: relative;
  left: 100px;
}

في هذه الحالة سيتحرك العنصر 100 بكسل نحو اليمين، لكنه سيظل محتفظاً بمساحته الأصلية داخل الصفحة.

نتيجة استخدام position relative مع left 100px في CSS

تجربة القيمة absolute

يمكنك كتابة الكود التالي:

.box-1 {
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
  position: absolute;
  left: 100px;
}

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

شرح عملي: الأب والابن مع relative وabsolute

لفهم الفرق الحقيقي، نحتاج إلى مثال يحتوي على عنصر أب وعنصر ابن.

رسم يوضح علاقة العنصر الأب والابن عند استخدام relative وabsolute

كود HTML

<body>
  <div class="box-1">
    <div class="box-2"></div>
  </div>
</body>

تنسيق الصندوقين

.box-1 {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  border: 2px solid black;
  margin: auto;
}

.box-2 {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
}

صندوق أزرق يحتوي صندوقاً وردياً في الزاوية العلوية اليسرى

الحالة الأولى: الأب .box-1 يملك position: relative

body {
}

.box-1 {
  position: relative;
}

.box-2 {
  position: absolute;
  left: 100px;
}

النتيجة هنا أن العنصر .box-2 سيتحرك 100 بكسل نسبةً إلى العنصر الأب .box-1، لأن الأب أصبح مرجع التموضع.

نتيجة تحريك العنصر الابن absolute نسبة إلى العنصر الأب relative

الحالة الثانية: العنصر body هو المرجع

body {
  position: relative;
}

.box-1 {
}

.box-2 {
  position: absolute;
  left: 100px;
}

في هذه الحالة، سيتحرك العنصر .box-2 نسبةً إلى body، لأن أقرب عنصر أب يملك قيمة position مناسبة هو body.

نتيجة تموضع العنصر absolute نسبة إلى body في CSS

متى تستخدم relative ومتى تستخدم absolute؟

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

ما هي القيمة fixed في CSS؟

القيمة fixed تجعل العنصر ثابتاً بالنسبة إلى نافذة المتصفح، وليس بالنسبة إلى الحاوية الأب. وهذا يعني أن العنصر سيبقى في مكانه حتى عند تمرير الصفحة لأعلى أو لأسفل.

شرح مرئي لخاصية fixed في CSS وتثبيت العنصر أثناء التمرير

مثال عملي على fixed

اكتب الكود التالي في HTML:

<div class="container">
  <p>lorem200</p>
  <div class="box-1">fixed</div>
  <p>lorem200</p>
</div>

ثم أضف هذا التنسيق:

.container {
  height: 3000px;
}

.box-1 {
  height: 120px;
  width: 120px;
  background-color: skyblue;
  border: 2px solid black;
  display: grid;
  place-content: center;
}

وأضف في النهاية:

.box-1 {
  position: fixed;
  top: 100px;
  left: 200px;
}

النتيجة أن الصندوق سيبقى في نفس الموضع على الشاشة حتى عند التمرير.

صورة متحركة توضح بقاء العنصر ثابتاً باستخدام position fixed عند التمرير

أشهر استخدامات fixed

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

ما هي القيمة sticky في CSS؟

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

شرح مرئي لخاصية sticky في CSS

مثال عملي على sticky

لا حاجة إلى تغيير بنية HTML أو معظم التنسيقات السابقة، فقط استبدل قيمة position بهذا الشكل:

.box-1 {
  position: sticky;
  top: 30px;
  left: 200px;
}

عند التمرير، سيظل العنصر يتحرك بشكل طبيعي إلى أن يصل إلى مسافة 30px من أعلى الشاشة، ثم يثبت هناك.

صورة متحركة توضح عمل position sticky عند التمرير في الصفحة

أين يفيد استخدام sticky؟

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

مقارنة سريعة بين قيم position

القيمة السلوك أفضل استخدام
static الوضع الافتراضي داخل التدفق الطبيعي نادراً ما تُستخدم بشكل صريح
relative تحريك نسبي مع الحفاظ على المساحة الأصلية تجهيز عنصر أب أو إزاحات بسيطة
absolute خارج التدفق الطبيعي ويتموضع نسبة إلى أقرب أب مناسب العناصر الدقيقة داخل الحاويات
fixed يثبت نسبة إلى نافذة المتصفح العناصر العائمة والثابتة
sticky يتحول من عادي إلى ثابت عند نقطة تمرير محددة العناوين والأشرطة اللاصقة

أفضل الممارسات عند استخدام خاصية position

  1. لا تستخدم absolute بكثرة إلا عند الحاجة الحقيقية، لأنه قد يعقد التخطيط إذا أسيء استخدامه.
  2. احرص على تحديد عنصر أب مناسب عند العمل مع absolute، وغالباً يكون ذلك بإضافة position: relative إلى الحاوية.
  3. اختبر التصميم على الشاشات الصغيرة، لأن التموضع الدقيق قد يبدو ممتازاً على الحاسوب لكنه يسبب مشاكل على الهاتف.
  4. استخدم sticky وfixed بحذر حتى لا تحجب العناصر الثابتة محتوى الصفحة.
  5. اجمع بين Grid أو Flexbox وposition بدلاً من الاعتماد على خاصية واحدة فقط، لتحصل على أفضل توازن بين المرونة والتنظيم.

الخلاصة التقنية

خاصية position من أهم أدوات التحكم البصري في CSS. إذا فهمت الفرق بين relative وabsolute وfixed وsticky، فستتمكن من بناء واجهات أكثر احترافية ومرونة، مع قدرة أعلى على حل مشكلات التموضع في المشاريع الحقيقية. من الناحية التقنية، أفضل نهج هو استخدام التخطيطات الحديثة مثل Flexbox وGrid كأساس، ثم اللجوء إلى position عندما تحتاج إلى تحكم موضعي دقيق لا يمكن تحقيقه بالوسائل التقليدية وحدها.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *