التموضع (Position) و z-index

خاصية position

تحدّد كيف يُوضَع العنصر في الصفحة. لها خمس قيم، نتحكّم بموضعها عبر الإزاحات top, right, bottom, left.

static — الافتراضي

الوضع الطبيعي ضمن تدفّق الصفحة. الإزاحات لا تؤثّر عليه.

relative — نسبةً لموضعه الأصلي

يُزاح من مكانه الطبيعي دون التأثير على العناصر الأخرى:

.box {
  position: relative;
  top: 20px;
  left: 30px;   /* يُزاح لكن يحجز مكانه الأصلي */
}

مهم أيضًا كـ مرجع للعناصر absolute بداخله.

absolute — نسبةً لأقرب أب مُموضَع

يخرج من التدفّق ويُوضَع نسبةً لأقرب أب position غير static (أو الصفحة):

.parent { position: relative; }
.badge {
  position: absolute;
  top: 0;
  right: 0;   /* في الزاوية العلوية للأب */
}

fixed — ثابت في الشاشة

يبقى في مكانه حتى عند التمرير (مثل شريط علوي):

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

sticky — لاصق عند التمرير 🌟

يتصرّف كـ relative حتى يصل حدًّا معيّنًا، فيلتصق:

.header {
  position: sticky;
  top: 0;   /* يلتصق أعلى الشاشة عند التمرير */
}

التراص (z-index)

عند تراكب العناصر، z-index يحدّد أيّها فوق. يعمل فقط مع العناصر المُموضَعة (غير static):

.modal {
  position: fixed;
  z-index: 100;   /* فوق كل شيء أقل */
}
.overlay { z-index: 50; }

كلما زاد الرقم، علا العنصر. القيمة الافتراضية auto تعني "حسب ترتيب العنصر في HTML" (اللاحق فوق السابق)، والقيم السالبة ترسل العنصر خلف المحتوى، مفيدة لخلفيات زخرفية.

جرّب: بدّل الرقمين وشاهد البطاقتين تنقلبان:

لماذا لا يعمل z-index: 9999؟ سياق التراص

أشهر لغز: عنصر بـ z-index: 9999 يبقى تحت عنصر بـ z-index: 10. السبب سياق التراص (stacking context): بعض الخصائص على الأب تنشئ "طبقة مغلقة"، وأبناؤه يترتّبون داخلها فقط، ولا يقدرون الخروج فوق ما هو فوق أبيهم مهما كبر رقمهم. من هذه الخصائص:

• position غير static مع z-index غير auto
• opacity أقل من 1
• transform أو filter بأي قيمة غير none

.sidebar { position: relative; z-index: 1; }
.sidebar .menu { position: absolute; z-index: 9999; }  /* محبوسة داخل طبقة .sidebar */
.header { position: relative; z-index: 2; }            /* تبقى فوق القائمة */

الحل ليس رقمًا أكبر، بل نقل العنصر خارج ذلك الأب، أو رفع z-index الأب نفسه.

💡 نظّم طبقات مشروعك كمتغيّرات بدل أرقام عشوائية: --z-dropdown: 50; --z-modal: 100;.

الأخطاء الشائعة

• ❌ استخدام absolute بلا أب relative → يُموضَع نسبةً للصفحة كلها.
• ❌ توقّع عمل z-index على عنصر static → يحتاج position غير static (أو أن يكون ابنًا مباشرًا في حاوية flex/grid).
• ❌ سباق الأرقام (999، 9999، 99999) بدل فهم سياق التراص → الرقم لا يُخرج العنصر من طبقة أبيه.
• ❌ الإفراط في fixed/absolute → يكسر التدفّق والتجاوب.

خلاصة

static (طبيعي)، relative (إزاحة مع حجز المكان + مرجع)، absolute (نسبةً لأب مُموضَع)، fixed (ثابت في الشاشة)، sticky (لاصق عند التمرير)، وz-index للتحكّم بالتراكب.