التموضع (Position) — تصميم CSS

التموضع (position)

position يخرج العنصر من ترتيبه الطبيعي (التدفق) أو يزيحه عنه.

| القيمة | يحتفظ بمكانه في التدفق؟ | الإزاحة نسبةً إلى | الاستخدام النموذجي |

|---|---|---|---|

| static | ✅ | — (top وأخواتها لا تعمل) | الافتراضي |

| relative | ✅ | موقعه الأصلي | أب مرجعي لعنصر absolute |

| absolute | ❌ | أقرب أب غير static | شارة على بطاقة، قائمة منسدلة |

| fixed | ❌ | نافذة المتصفح | زر عائم، رأس ثابت، نافذة منبثقة |

| sticky | ✅ | يلتصق عند حد معين أثناء التمرير | رأس جدول، قائمة جانبية |

relative + absolute: الثنائي الأهم

.card {
    position: relative;          /* لا يتحرك، لكنه يصبح المرجع */
}
.badge {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;      /* الزاوية "البعيدة": يسار في rtl */
}

<article class="card">
    <span class="badge">جديد</span>
    <h3>دورة CSS</h3>
</article>

بدون position: relative على البطاقة، تبحث الشارة عن أقرب أب مُموضَع، وإن لم تجد تتموضع نسبةً إلى الصفحة كلها — فتظهر في زاوية الشاشة. هذا أشهر خطأ في position.

الإزاحات

- top و bottom و left و right: فيزيائية.

- inset-inline-start و inset-inline-end: منطقية — تنعكس تلقائياً مع rtl.

- inset: 0 اختصار للأربع (يملأ الأب بالكامل).

fixed

.back-to-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
}

العنصر الثابت يغطي المحتوى تحته. رأس ثابت بارتفاع 64px يحتاج padding-top: 64px على body وإلا غطى بداية الصفحة. وعلى الجوال، العناصر الثابتة الكبيرة تسرق مساحة ثمينة.

sticky

thead th {
    position: sticky;
    top: 0;
    background: white;     /* بدون خلفية سيظهر المحتوى من خلفه */
}

- يحتاج قيمة إزاحة (top: 0) وإلا لا يلتصق.

- يلتصق داخل أبيه فقط: عندما ينتهي الأب يذهب معه.

- لا يعمل إن كان أحد الآباء overflow: hidden (أشهر سبب لـ "sticky لا يعمل").

التوسيط بـ absolute (أسلوب قديم)

top: 50%; left: 50%; transform: translate(-50%, -50%); — ما زال شائعاً، لكن Flexbox و Grid (place-items: center) أبسط في أغلب الحالات.

متى لا تستخدم position؟

لترتيب العناصر بجانب بعضها أو بناء التخطيط. هذه مهمة Flexbox و Grid. التموضع للعناصر التي "تطفو" فوق غيرها.

تمرين

أضف إلى بطاقات المشاريع شارة "جديد" في زاويتها، وزر "للأعلى" ثابتاً في أسفل الشاشة، واجعل رأس جدول الدراسة sticky. جرّب حذف position: relative من البطاقة ولاحظ أين تذهب الشارة.

/* Static - الافتراضي */
.static-box {
    position: static;
    /* top, left, etc. لا تعمل */
}

/* Relative - نسبي */
.relative-box {
    position: relative;
    top: 20px;    /* ينزل 20px */
    left: 30px;   /* يتحرك 30px لليمين */
}

/* Absolute - مطلق */
.container {
    position: relative; /* مهم للأبناء */
}

.absolute-box {
    position: absolute;
    top: 0;
    right: 0;
    /* سيكون في الزاوية العليا اليمنى للـ container */
}

/* Fixed - ثابت */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

/* Sticky - لاصق */
.sticky-nav {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

/* z-index للتراكب */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-content {
    position: fixed;
    z-index: 1001; /* فوق الـ overlay */
}