التموضع Position

1. خصائص التموضع (Position)

تحريك العناصر باستخدام top, bottom, right, left يعتمد على نوع الـ Position.

المعاينة

Static

Relative

Absolute

Fixed

position: static;: الحالة الافتراضية لأي عنصر. يبقى في مكانه الطبيعي ولا يستجيب لأوامر (top, bottom, left, right).
position: relative;: يسمح بتحريك العنصر (مثال: top: 10px) بالنسبة لمكانه الأصلي، ويبقى مكانه محجوزاً في الصفحة. كما يُعتبر النقطة المرجعية للعناصر الأبناء الـ absolute.
position: absolute;: يتحرر العنصر من مكانه في الصفحة، ويتموضع بالنسبة لـ أقرب أب له يحمل position: relative. (لذلك وضعنا للأب relative). هنا تم وضعه أسفل يسار الأب.
position: fixed;: (الزر الأخضر الدائري) يثبت العنصر بالنسبة للشاشة (النافذة)، ولا يتحرك أبداً حتى لو قمت بالتمرير (Scroll).

لتحديد أي عنصر يظهر فوق الآخر عندما تتقاطع العناصر (ينطبق فقط على العناصر المتموضعة).

المعاينة

z-index: 1

z-index: 3

z-index: 2

الـ z-index يحدد أولوية ظهور العنصر، الرقم الأكبر يظهر في الأعلى (في المقدمة).
في المثال، العنصر البرتقالي أخذ z-index: 3 لذلك هو فوق الجميع، والعنصر الأزرق z-index: 1 فهو في الخلف، والأحمر بالمنتصف z-index: 2.
ملاحظة هامة جداً: الـ z-index لا يعمل أبداً مع position: static (الافتراضي)، يجب أن تعطي العنصر relative أو absolute أو fixed لكي يعمل الـ z-index!