جاري التحميل...

خاصية position في CSS

دروس التدفق علّمت الصناديق كيف تنضم إلى السطر. position يجيب سؤالًا آخر: أين يجلس هذا الصندوق نسبةً إلى مكانه الطبيعي، أو إلى سلفه، أو إلى الشاشة؟ أتقن القيم الخمس المألوفة قبل اللجوء إلى طبقات التكديس أو حيل float.

مجموعة أدوات position

📊 position بنظرة سريعة

القيمة	المهمة اليومية
`static`	الافتراضي — إزاحات مثل top/left لا تفيد عادة
`relative`	يُزحزح من مكانه الطبيعي؛ يحتفظ بمساحته؛ يمكنه تثبيت أبناء absolute
`absolute`	يُخرج من التدفق العادي؛ يُوضع نسبةً لأقرب سلف مُموضع
`fixed`	يُخرج من التدفق؛ يُثبَّت في viewport أثناء التمرير
`sticky`	يتصرف كـ relative حتى عتبة تمرير، ثم يلتصق داخل حاويته

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

relative — إزاحة مهذبة

relative يُبقي العنصر في التدفق. المساحة الأصلية تبقى محجوزة. الإزاحات الصغيرة مثالية للتعديلات البصرية — ولتمييز أبٍ يجب أن يطيعه الأبناء absolute.

إزاحة relative

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

absolute — اخرج من التدفق

absolute يسحب الصندوق من التدفق العادي. الجيران يغلقون الفجوة. التموضع يعتمد على أقرب سلف بـ position غير static — غالبًا أب relative. بلا هذا المرساة قد يصعد العنصر إلى كتلة احتواء أكبر.

شارة absolute

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

امنح absolute منزلًا

اربط أبناء absolute بأب مقصود. سمِّ العلاقة بالكلاسات ليبقى التخطيط مقروءًا.

أب مُموضع

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

fixed — التثبيت في viewport

fixed يُثبّت العنصر على الشاشة. تمرير الصفحة لا يحرّكه. استخدمه لإشعارات هادئة أو أشرطة أدوات — لا كاختصار لكل تخطيط أعمدة.

إشعار fixed

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

sticky — relative ثم ملتصق

sticky يبقى في التدفق حتى تتجاوز عتبة تمرير (top شائع)، ثم يلتصق داخل سلفه القابل للتمرير. يحتاج مساحة للتمرير وأبًا منطقيًا — وإلا يبدو معطوبًا.

تسمية قسم sticky

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

عادة position هادئة

استخدم relative للإزاحات الصغيرة ومراسي absolute. استخدم absolute للشارات والتراكبات داخل أب معروف. احفظ fixed وsticky لعناصر الواجهة المقصودة. اترك تكديس z-index وتنظيف float لدروسهما.

أدوار position مسماة

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

جرّب بنفسك

أزح .card بـ position: relative وقيم top / left صغيرة.
ضع .badge بـ absolute داخل أب .media من نوع relative.
أضف إشعارًا صغيرًا fixed في زاوية — مرّر وشاهد ثباته.
جرّب تسمية sticky مع top: 0 في قسم طويل قابل للتمرير.
اكتب جملة واحدة: متى يكون absolute أأمن من fixed؟

أخطاء شائعة

استخدام absolute بلا أب مُموضع ثم التساؤل لماذا يقفز بعيدًا
اللجوء إلى fixed لحل تخطيط الصفحة العادي
توقع عمل sticky بلا مساحة تمرير أو مع أسلاف متعارضة
التعامل مع هذا الدرس كدرس صفوف inline-block (مهمة مختلفة)
رمي وصفات z-index أو float هنا بدل تعلّم أوضاع التموضع

الخلاصة

position يتحكم بالتموضع نسبةً للتدفق أو الأسلاف أو viewport
relative يُزحزح ويرسي؛ absolute يغادر التدفق داخل ذلك المرساة
fixed يُثبَّت في viewport؛ sticky يمزج سلوك relative والالتصاق
الإزاحات مهمة فقط حين لا يكون position هو static
أبقِ أدوات التكديس وfloat للاحقًا — أتقن الأوضاع الخمسة أولًا

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة