position و z-index في CSS: تحديد مكان العناصر

شارة «جديد» فوق زاوية صورة المنتج، وشريط علوي يبقى ثابتاً وأنت تمرر الصفحة، وزر «العودة للأعلى» الملتصق بأسفل الشاشة. كل هذه عناصر خرجت من الترتيب العادي للصفحة ووقفت في مكان تحدده أنت. الخاصية المسؤولة عن ذلك هي position، وهي موضوع هذا الدرس.

الترتيب العادي

المتصفح يرتب العناصر افتراضياً واحداً بعد الآخر كما كُتبت في HTML. هذا يسمى الانسياب العادي (Normal Flow)، وقيمة position فيه هي static.

والعنصر بقيمة static يتجاهل خصائص التحريك الأربع: top و right و bottom و left. لكي تعمل هذه الخصائص يجب أن تغيّر position أولاً.

relative: تحريك من المكان الأصلي

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

العنصر يتحرك نسبةً إلى مكانه الأصلي: ينزل 10 بكسل ويبتعد 20 بكسل عن اليسار. والمهم أن مكانه الأصلي يبقى محجوزاً، فالعناصر الأخرى لا تتحرك.

لاحظ أن top: 10px تعني «ابتعد عن الأعلى 10 بكسل»، أي تحرك إلى الأسفل.

لكن أشهر استخدام لـ relative ليس التحريك نفسه، بل أن تجعل العنصر مرجعاً لأبنائه، كما سترى الآن.

absolute: مكان حر داخل الأب

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
}

العنصر بقيمة absolute:

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

هنا الشارة تقف على بعد 8 بكسل من أعلى البطاقة ويسارها، وتتحرك مع البطاقة أينما ذهبت.

تخيّل ملصقاً على صندوق: تلصقه في زاوية الصندوق، فإذا نقلت الصندوق انتقل الملصق معه. الصندوق هو الأب relative، والملصق هو الابن absolute.

لا تنسَ relative على الأب

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

fixed: ثابت على الشاشة

.to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

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

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

sticky: يلتصق عند الوصول

.table-header {
  position: sticky;
  top: 0;
}

sticky مزيج ذكي: العنصر يتصرف عادياً ويتحرك مع الصفحة، حتى يصل إلى المسافة المحددة من حافة الشاشة، وعندها يلتصق ويبقى ظاهراً.

• يجب تحديد top أو غيرها، وإلا لن يلتصق.
• يبقى ملتصقاً ما دام أبوه ظاهراً، ثم يغادر معه.

يناسب عناوين الأقسام في القوائم الطويلة، ورؤوس الجداول، والشريط العلوي.

ملخص القيم الخمس

القيمة	يحجز مكانه؟	يقيس مكانه من
static	نعم	لا يتحرك
relative	نعم	مكانه الأصلي
absolute	لا	أقرب أب له position
fixed	لا	نافذة المتصفح
sticky	نعم	نافذة التمرير عند الالتصاق

الاختصار inset

لتمديد عنصر على أبيه كله تحتاج أربعة أسطر: top: 0 و right: 0 و bottom: 0 و left: 0. الخاصية inset تختصرها:

.overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
}

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

ترتيب الطبقات: z-index

عندما يتراكب عنصران، من يظهر فوق الآخر؟ الأصل أن المكتوب لاحقاً في HTML يظهر فوق. وتغيّر ذلك بـ z-index:

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.modal {
  position: fixed;
  z-index: 100;
}

الرقم الأكبر يظهر فوق الأصغر. تخيّل أوراقاً فوق بعضها على المكتب: z-index هو ترتيب الورقة في الكومة.

و z-index تعمل فقط مع عنصر له position غير static.

جرّب بنفسك

مرّر داخل صندوق النتيجة ولاحظ الشريط الملتصق في الأعلى والزر الثابت في الأسفل. ثم احذف السطر position: relative من .card وشاهد أين تذهب الشارة:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; margin: 0; padding: 0 12px; } .bar { position: sticky; top: 0; z-index: 10; background: #5b5bf0; color: white; padding: 10px; } .card { position: relative; margin-top: 16px; padding: 40px 16px 16px; background: #ececff; border-radius: 12px; } .badge { position: absolute; top: 8px; left: 8px; background: crimson; color: white; padding: 2px 10px; border-radius: 999px; } .to-top { position: fixed; bottom: 12px; left: 12px; background: #141826; color: white; padding: 8px 14px; border-radius: 10px; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• absolute بلا أب relative: العنصر يقيس من الصفحة كلها ويظهر في مكان غير متوقع.
• z-index لا تعمل: العنصر static. أضف له position: relative.
• sticky لا يلتصق: نسيت top، أو أن أحد آبائه له overflow: hidden.
• ترتيب الصفحة كلها بـ absolute: الصفحة تنكسر مع أول تغيير في حجم الشاشة. الترتيب العام وظيفة Flexbox و Grid، و position للحالات الخاصة.

اختبر نفسك

سؤال

عنصر له position: absolute. نسبةً إلى ماذا يتحدد مكانه؟

أقرب أب له position غير staticنافذة المتصفح دائماًمكانه الأصلي في الصفحة

سؤال

أي قيمة تجعل الشريط العلوي يتحرك مع الصفحة ثم يثبت عند وصوله أعلى الشاشة؟

stickyfixedrelative

الخلاصة

• static هي القيمة الافتراضية، والعنصر فيها لا يتحرك.
• relative تحرّك العنصر من مكانه الأصلي، وتجعله مرجعاً لأبنائه.
• absolute تُخرج العنصر من الانسياب وتضعه نسبةً إلى أقرب أب له position.
• fixed تثبته على الشاشة، و sticky تلصقه عند الوصول.
• z-index ترتب الطبقات، والرقم الأكبر فوق.