تحديد الموضع: relative وabsolute وfixed وsticky
أخرج العناصر من التدفق العادي باستخدام قيم position لتراكب المحتوى وتثبيت الترويسات وإنشاء أشرطة جانبية لاصقة.
تحديد الموضع: relative وabsolute وfixed وsticky درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
التدفق الطبيعي للمستند
تتبع العناصر افتراضيًا التدفق الطبيعي للمستند: تتراص عناصر الكتلة رأسيًا، وتتدفق العناصر المضمّنة أفقيًا ضمن النص. وتتيح لك الخاصية position الخروج من هذا التدفق لإنشاء التراكبات والرؤوس الثابتة والتلميحات.
position: static (الافتراضي)
يبدأ كل عنصر باستخدام position: static. وهذا يعني أنه يُوضَع وفق التدفق الطبيعي للمستند. ولا تأثير لخصائص top وright وbottom وleft في العناصر الساكنة.
position: relative
تُبقي position: relative العنصر ضمن التدفق الطبيعي، لكنها تتيح لك إزاحته عن موضعه الأصلي باستخدام top وright وbottom وleft. والأهم أنها تنشئ سياق تموضع للعناصر السليلة ذات التموضع المطلق.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute يزيل العنصر من التدفق الطبيعي. ويُموضعه بالنسبة إلى أقرب عنصر أب ذي تموضع (أي قيمة position غير static). وإذا لم يوجد عنصر أب ذي تموضع، فسيكون موضعه بالنسبة إلى إطار العرض.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}خاصية z-index
يمكن أن تتداخل العناصر ذات التموضع. استخدم z-index للتحكم في ترتيب التكديس. كلما زادت قيمة z-index ظهر العنصر في الأعلى. ولا يعمل ذلك إلا مع العناصر ذات التموضع (وليس static). كما ينشئ سياق تكديس جديدًا.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed يزيل العنصر من التدفق الطبيعي ويثبّته في إطار العرض. ولا يتحرك مع تمرير الصفحة. وهو مناسب تمامًا للرؤوس الثابتة وأزرار الإجراءات العائمة ولافتات ملفات تعريف الارتباط.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky يجمع بين سلوكين: يتحرك العنصر مع تمرير الصفحة حتى يصل إلى حدّ معين (يُحدَّد باستخدام top أو bottom)، ثم يثبت عنده. وهو مفيد لرؤوس الأقسام في الجداول الطويلة أو للأشرطة الجانبية التي تثبت بعد تجاوز الرأس.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}توسيط العناصر باستخدام position: absolute
تقنية شائعة: اجمع بين position: absolute; top: 50%; left: 50% وtransform: translate(-50%, -50%) لتوسيط العنصر تمامًا داخل العنصر الأب ذي التموضع.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}يقتطع Overflow Hidden العناصر الأبناء المطلقة التموضع
يمكن لعنصر ابن ذي تموضع مطلق أن يتجاوز حدود العنصر الأب افتراضيًا. تؤدي إضافة overflow: hidden إلى العنصر الأب إلى اقتطاع أي جزء يقع خارج صندوقه، وهو أمر مفيد لتأثيرات صور البطاقات واقتطاع الشارات.
مشكلة شائعة: سياقات التكديس غير المقصودة
تنشئ بعض الخصائص سياقات تكديس دون قصد، مثل: transform وfilter وisolation: isolate. وقد يؤدي ذلك إلى صراعات بين قيم z-index، بحيث يظل عنصر قيمته z-index: 9999 خلف عنصر آخر لأنه موجود داخل سياق تكديس أدنى.
متى تستخدم كل نوع من التموضع
relative: للإزاحات وإنشاء سياق للتموضع. absolute: للشارات والتلميحات والطبقات فوق المحتوى بالنسبة إلى عنصر أب. fixed: للرؤوس الدائمة والنوافذ المنبثقة والإشعارات. sticky: لرؤوس الأقسام والتنقل الجانبي الذي يتبع التمرير. تجنب استخدام position لإنشاء التخطيطات، واستخدم Flex أو Grid بدلًا من ذلك.
تحقق سريع
لدى عنصر ما position: absolute; top: 0; right: 0;. أين سيظهر إذا كان العنصر الأب لديه position: relative؟
مراجعة: التموضع في CSS
static هي القيمة الافتراضية. relative يزيح العنصر دون إخراجه من التدفق، وينشئ سياقًا للتموضع. absolute يخرج العنصر من التدفق ويموضعه بالنسبة إلى أقرب عنصر أب ذي تموضع. fixed يثبت العنصر في إطار العرض. sticky يتحرك مع التمرير ثم يثبت. استخدم z-index للتحكم في ترتيب تداخل العناصر.
الأسئلة الشائعة
هل درس «تحديد الموضع: relative وabsolute وfixed وsticky» مجاني؟
نعم — نص درس «تحديد الموضع: relative وabsolute وfixed وsticky» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحديد الموضع: relative وabsolute وfixed وsticky»؟
أخرج العناصر من التدفق العادي باستخدام قيم position لتراكب المحتوى وتثبيت الترويسات وإنشاء أشرطة جانبية لاصقة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «تحديد الموضع: relative وabsolute وfixed وsticky»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المحددات والتتالي
- الألوان والطباعة ونموذج الصندوق
- Display: أساسيات block وinline وflex وgrid
- تحديد الموضع: relative وabsolute وfixed وsticky