CSS Academy · درس

التموضع الثابت والملتصق

ثبّت العناصر بالنسبة إلى نافذة العرض، أو أنشئ ترويسات وأشرطة جانبية تلتصق أثناء التمرير.

التموضع الثابت والملتصق درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

position: fixed

يُوضَع العنصر الثابت بالنسبة إلى إطار عرض المتصفح، ويظل في موضعه حتى عند تمرير الصفحة. كما يُزال من تدفق المستند.

<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>

حالات استخدام التموضع الثابت

الاستخدامات الشائعة لـ position: fixed:

أشرطة تنقل تبقى في الأعلى
أزرار الإجراءات العائمة (FABs)
أدوات محادثة في أسفل اليمين
لافتات الموافقة على ملفات تعريف الارتباط
تراكبات النوافذ المنبثقة

التعويض عن الرؤوس الثابتة

تتداخل الرؤوس الثابتة مع المحتوى الموجود أسفلها. أضيفوا مسافة داخلية أو هامشًا علويًا يساوي ارتفاع الرأس لدفع المحتوى إلى الأسفل:

<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>

العناصر الأب ذات Transform والتموضع الثابت

هناك سلوك مهم غير بديهي: إذا طُبّق transform أو perspective أو filter في CSS على عنصر أب، يصبح التموضع الثابت نسبيًا إلى ذلك العنصر الأب بدلًا من إطار العرض. وهذا خطأ شائع.

position: sticky

تُعد position: sticky مزيجًا من سلوكين: يمرر العنصر بشكل طبيعي حتى يصل إلى حد محدد (مثل top: 0)، ثم يثبت في موضعه داخل حاويته الأب.

<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>

يتطلب Sticky وجود أب قابل للتمرير

يثبت العنصر sticky داخل كتلة الاحتواء الخاصة به. وإذا لم يكن العنصر الأب مرتفعًا بما يكفي للتمرير، فلن يكون لـ sticky أي تأثير. ويجب ألا يكون overflow للعنصر الأب مضبوطًا على hidden.

Top وRight وBottom وLeft مع sticky

يجب تحديد إزاحة واحدة على الأقل لتفعيل sticky. ومن الأنماط الشائعة:

<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>

رؤوس الجداول الثابتة

يُعد sticky مثاليًا لرؤوس الجداول داخل أغلفة الجداول القابلة للتمرير؛ إذ يظل الرأس ظاهرًا أثناء تمرير المستخدم عبر الصفوف.

<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>

نمط الشريط الجانبي الثابت

شريط جانبي ثابت تقليدي يظل ظاهرًا أثناء تمرير المحتوى الرئيسي:

<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>

ملخص Fixed مقابل Sticky

الاختلافات الأساسية:

Fixed: يكون دائمًا بالنسبة إلى إطار العرض، ويكون دائمًا خارج التدفق
Sticky: يمرر مع المحتوى حتى يصل إلى الحد، ويبقى ضمن التدفق، ويتوقف عند حدود العنصر الأب

الأداء: Fixed والطبقات

تنشئ العناصر الثابتة سياق تكديس جديدًا، وقد تؤدي إلى إعادة التخطيط أثناء التمرير إذا تداخلت مع مناطق إعادة الرسم. اجعلوا العناصر الثابتة بسيطة، وتجنبوا الخصائص المكلفة مثل box-shadow عليها.

تحقق سريع

ما القيد الذي تفرضه position: sticky ولا تفرضه position: fixed؟

خلاصة

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

الأسئلة الشائعة

هل درس «التموضع الثابت والملتصق» مجاني؟

نعم — نص درس «التموضع الثابت والملتصق» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «التموضع الثابت والملتصق»؟

ثبّت العناصر بالنسبة إلى نافذة العرض، أو أنشئ ترويسات وأشرطة جانبية تلتصق أثناء التمرير. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «التموضع الثابت والملتصق»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy