في بناء واجهات الويب المتقدمة، تتجاوز حاجة المطورين التخطيطات البسيطة والثابتة. لقد تناولنا في الدروس السابقة المفاهيم الأساسية للتموضع مثل التموضع النسبي (relative) والمطلق (absolute) والثابت (fixed)، وكيفية التعامل مع التدفق الطبيعي للعناصر. لكن التطبيقات الحقيقية والمواقع الحديثة تتطلب سلوكيات أكثر ذكاءً؛ مثل قوائم التنقل التي ترافق المستخدم أثناء التمرير بطريقة مرنة، أو إدارة طبقات العناصر المتداخلة لمنع تداخل المحتوى بصرياً. في هذا الدرس، سننتقل إلى المستوى التالي من خلال استكشاف عنصرين أساسيين في التموضع المتقدم: العناصر اللزجة أو الثابتة بذكاء (Sticky Positioning) وإدارة طبقات التراكب باستخدام (Z-index). سنفهم كيف يعمل كل منهما تحت الغطاء، والشروط البرمجية الدقيقة لعملهما، وكيف نتجنب الأخطاء الشائعة التي تقع فيها الكثير من مشاريع الواجهات الأمامية.

فهم التموضع الثابت الذكي (position: sticky)

يُعد التموضع (position: sticky) أحد أكثر الخصائص فائدة في CSS، وغالباً ما يُخلط بينه وبين التموضع الثابت (position: fixed) أو التموضع النسبي. السر في التموضع اللزج يكمن في أنه يجمع بين الاثنين بناءً على موضع التمرير (scroll position) للمستخدم. عملياً، يعمل العنصر الذي يحمل قيمة position: sticky كعنصر ذو تموضع نسبي (relative) حتى تصل نافذة التمرير إلى نقطة محددة يتم تعريفها عبر خصائص الإزاحة (مثل top: 0). عند الوصول إلى هذه النقطة، يتحول سلوك العنصر إلى تموضع ثابت (fixed)، فيلتصق بالمكان المحدد أثناء استمرار المستخدم في التمرير، ولكنه يبقى محصوراً داخل نطاق العنصر الأب المباشر له. هذا يعني أنه بمجرد أن ينتهي العنصر الأب ويغادر منطقة الرؤية أثناء التمرير، سيتحرك العنصر اللزج للأعلى مع الأب ولن يبقى ثابتاً إلى الأبد كما يحدث مع position: fixed.

الشروط الأساسية لنجاح عمل position: sticky

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

1. إزاحة مطلوبة: يجب تحديد إزاحة واحدة على الأقل للعنصر، مثل top أو bottom أو left أو right. كتابة position: sticky وحدها دون تحديد مسافة الالتصاق تجعل المتصفح يعامله كعنصر نسبي عادي ولن يلاحظ المستخدم أي تغيير.
2. قيود الأب والـ Overflow: العنصر الأب المباشر يجب ألا يحتوي على خصائص تحكم بالتمرير تحد من حركته مثل overflow: hidden أو overflow: scroll أو overflow: auto. إذا وُجدت هذه الخصائص في الأب، فسيكون نطاق الالتصاق محصوراً داخل حدود الأب المباشر، وفي كثير من الأحيان قد لا يعمل التموضع نهائياً إذا لم يكن الأب قابلاً للتمرير بالمساحة الكافية.
3. ارتفاع العنصر الأب: يجب أن يكون للعنصر الأب ارتفاع كافٍ (أكبر بوضوح من ارتفاع العنصر الابن اللزج) لكي يمتلك العنصر الابن مساحة كافية للحركة والتمرير داخله.

التحكم في الطبقات باستخدام Z-index وسياق التراص (Stacking Context)

عندما يبدأ المحتوى بالتداخل على الشاشة —حين تتحرك عناصر لزجة أو مطلقة فوق عناصر أخرى— تصبح الحاجة ملحة للتحكم في أي عنصر يظهر فوق الآخر. هنا يأتي دور الخاصية z-index. تتعامل الخاصية z-index مع المحور الثالث (Z-axis) للعمق البصري في صفحة الويب. القيم الأعلى تعني أن العنصر يظهر في طبقة أقرب للمستخدم وأعلى في هرمية التراص. ولكن، لكي يعمل z-index بشكل صحيح، يجب أن يكون العنصر في وضع تموضع غير افتراضي، أي أن يكون مسبوقاً بـ position: relative أو absolute أو fixed أو sticky. العناصر ذات position: static تتجاهل تماماً خاصية z-index.

الفخ الأكبر: سياق التراص (Stacking Context)

المشكلة الأكثر شيوعاً للمطورين متوسطي المستوى مع z-index هي إعطاء عنصر قيمة عالية جداً مثل z-index: 9999، ومع ذلك يظهر العنصر تحت عنصر آخر ذو قيمة أقل بكثير مثل z-index: 5. يحدث هذا بسبب ظاهرة سياق التراص. سياق التراص هو بيئة ثلاثية الأبعاد لعناصر HTML داخل حاوية معينة. عندما يُنشئ عنصرٌ سياق تراص جديداً، تصبح جميع عناصر الأبناء محصورة بالكامل داخل هذا السياق. بغض النظر عن مدى ارتفاع قيمة z-index لعنصر ابن داخلي، لا يمكنه أبداً كسر سياق التراص للأب ومنافسة عنصر خارجي يقع في سياق تراص منفصل. يتم إنشاء سياق تراص جديد بعدة طرق شائعة في تصميم الواجهات، منها:

• عنصر الجذور الرئيسي للصفحة (HTML).
• عنصر يحمل خاصية position (relative أو absolute أو fixed أو sticky) مع قيمة z-index غير auto.
• عنصر تستخدم فيه خصائص حديثة مثل opacity بقيمة أقل من 1، أو transform، أو filter، أو clip-path، أو استخدام display: flex / grid في بعض الحالات والبيئات التي ينشئ فيها الأب سياق تراص للأبناء.

مثال عملي متكامل

لنقترب من التطبيق العملي ونفترض أننا نبني صفحة مقالات احترافية تحتوي على شريط تنقل جانبي (Sidebar) يجب أن يلتصق أثناء التمرير، وشريط علوي رئيسي ثابت، مع ضمان عدم تداخل الطبقات بشكل خاطئ. دعونا نرى كيف يتم تطبيق ذلك عبر هيكل HTML وتنسيقات CSS دقيقة:

<header class="site-header">
    <h1>موقع SiteGeeky التقني</h1>
</header>
<div class="page-container">
    <aside class="sidebar">
        <h3>الفهارس</h3>
        <ul>
            <li><a href="#">مقدمة CSS</a></li>
            <li><a href="#">التموضع المتقدم</a></li>
            <li><a href="#">طبقات التراكب</a></li>
        </ul>
    </aside>
    <main class="main-content">
        <article>
            <h2>محتوى المقال الرئيسي</h2>
            <p>هذا النص يمثل محتوى طويل يحتاج إلى مساحة تمرير كافية لكي تلاحظ عمل التموضع الثابت للجانب الأيمن أو الأيسر أثناء تصفح الصفحة.</p>
            <p>محتوى إضافي لمحاكاة التمرير الطويل داخل الصفحة والتحقق من سلاسة الأداء البرمجي...</p>
        </article>
    </main>
</div>

والآن نضيف أكواد التنسيق الخاصة بهذا الهيكل لتنفيذ السلوك المطلوب بدقة:

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    background-color: #f8fafc;
    color: #1e293b;
}

.site-header {
    background-color: #0f172a;
    color: #ffffff;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-container {
    display: flex;
    max-width: 1200px;
    margin: 2rem auto;
    gap: 2rem;
    padding: 0 1rem;
}

.sidebar {
    width: 280px;
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    /* التموضع اللزج هنا */
    position: sticky;
    top: 5rem; /* مسافة تعويضية أسفل الهيدر الثابت لمنع التداخل */
    height: fit-content;
    z-index: 10;
}

.main-content {
    flex: 1;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-height: 1500px; /* لضمان وجود مساحة تمرير كافية في الشاشة */
}

شرح الكود والتنفيذ

في المثال أعلاه، قمنا بتطبيق مفهومين أساسيين لضمان تجربة مستخدم مثالية:

1. شريط التنقل العلوي (.site-header): استخدمنا له position: sticky مع top: 0 و z-index: 100 ليبقى دائماً في أعلى الشاشة عند التمرير، ويكون في طبقة علوية تغطي أي محتوى مرئي يمر تحته.
2. الشريط الجانبي (.sidebar): تم إعطاؤه position: sticky مع top: 5rem. اخترنا قيمة 5rem عمداً لكي يبدأ بالالتصاق عندما يصل إلى مسافة تكفي لعدم اصطدامه بالشريط العلوي الثابت. كما وضعنا له z-index: 10، وهو رقم أقل من الهيدر العلوي لضمان عدم تغطيته إذا تداخلت العناصر لسبب ما.

أخطاء شائعة وكيفية تجنبها

عند العمل على مشاريع حقيقية تدمج بين خصائص sticky و z-index، يقع المطورون في مطبات متكررة تؤدي إلى سلوكيات بصرية مزعجة، ونذكر أبرزها:

• تحديد ارتفاع خاطئ للأب: إذا كان العنصر الأب للعنصر اللزج بنفس ارتفاع العنصر الابن تماماً، فلن تكون هناك مساحة للحركة وسيبدو العنصر كأنه غير لزج تماماً. يجب التأكد من أن مساحة الأب أكبر بكثير.
• الاعتماد المفرط على الأرقام الكبيرة في Z-index: استخدام قيم مثل 99999 كحل عشوائي لمشاكل الطبقات يؤدي إلى فوضى عارمة في الصيانة البرمجية لاحقاً. الأفضل دائماً بناء هرمية واضحة ومنطقية للطبقات داخل المشروع (مثل تخصيص 10 للعناصر العادية، 100 للقوائم الثابتة، 1000 للنوافذ المنبثقة Modals).
• نسيان تأثير الـ Overflow: كتابة خصائص قص مثل overflow-x: hidden في عنصر الجذور الأكبر (مثل body أو html) قد يؤطل أحياناً سلوك التموضع الثابت في بعض المتصفحات، لذا يجب اختيار مكان تطبيق خصائص التمرير بحذر شديد.

خلاصة

يمنحنا الفهم العميق للتموضع اللزج (Sticky) وسياق التراص في z-index القدرة على بناء واجهات مستخدم تفاعلية وعالية الاحترافية دون اللجوء المفرط لملفات جافاسكريبت ثقيلة. تذكر دائماً أن التحقق من خصائص الأب المباشر، وتحديد قيم الإزاحة بدقة، وفهم كيف تنشأ سياقات التراص الجديدة، هي المفاتيح الأساسية لتجنب أي سلوك غير متوقع في تصميمك وتأمين تجربة تصفح سلسة ومستقرة للمستخدمين عبر مختلف الشاشات.