1 position: static;

Static هي القيمة الافتراضية للعنصر وتعنى ان العنصر في الترتيب المنطقي له كما في ملف ال html

2 position: relative;

3 position: fixed;

4 position: absolute;

5 position: sticky;

هؤلاء القيم الأربعة (relative, fixed, absolute, sticky) يجب ان نضع معهم الجهة المُراد العنصر الانتقال إليها مثل :

• top
• bottom
• right
• left

top: 10px; وتعنى: بُعد العنصر بمقدار 10px من الاعلى

bottom: 12px; وتعنى: بُعد العنصر بمقدار 12px من الاسفل

right: 14px; وتعنى: بُعد العنصر عن جهة اليمين بمقدار 14px

left: 18px; وتعنى: بُعد العنصر عن جهة اليسار بمقدار 18px

2 position: relative;

relative تعنى بُعد العنصر عن مكانة الأصلي مثال على ذلك:

h1 {
  position: relative;
  top: 12px;
  right: 10px;
} 

معنى ذلك ان العنصر يَبعد عن مكانة الأصلي بمقدار 10px من جهة اليمين و 12px من الأعلى

3 position: fixed;

Fixed اصلاً ترجمتها ثابت او مُثبت. ومن خواص العنصر ال fixed انه:

1. خرج من الترتيب المنطقي له وان العنصر الذي يله في ملف ال html سوف يحل محله
2. العنصر يكون ثابت بالنسبة لحدود الصفحة حتى لو عملت scroll
3. عرض العنصر يتحدد على حسب المُحتوي الذي بداخلة

مثال على ذلك:

h1 {
  position: fixed;
  top:12px;
  right:10px;
 } 

معنى ذلك ان العنصر يَبعد عن حدود الصفحة بمقدار 10px من جهة اليمين و 12px من الأعلى ويكون ثابت في مكانة ولا يتحرك حتي لو عملت scroll

4 position: absolute;

من خواص العنصر ال absolute:

1. العنصر الabsolute يتحرك بالنسبة ل اقرب عنصر أب يحتوى على قيمة للposition ؛ وفى حالة عدم وجود عنصر اب يحتوى على قيمة للposition ف انه يتحرك بالنسبة لحدود الصفحة. (هشرح النقطة دي بالتفصيل في الفيديو عشان لازم تطبيق عملي خصوصاً على النقطة دي)
2. العنصر الabsolute يخرج من الترتيب المنطقي له وان العنصر الذي يله في ملف ال html سوف يحل محله مثل العنصر ال fixed
3. عرض العنصر يتحدد على حسب المُحتوي الذي بداخلة

⚠ هذا الكود مهم جدا جدا جدا

5 position: sticky;

هذا الكود ليس كود رسمي مُعتمد من منظمة ال w3.org ولكن لايزال تحت الاختبار (working draft) ولكنه يُستخدم كثيراً.
العنصر ال sticky هو عنصر ثابط في مكانة ويتحرك داخل العنصر الاب فقط وتظهر مُميزاته عند عمل scroll للأسفل بالماوس؛ وسيتم شرح هذه النقطة بالتفصيل في الفيديو لأنها تحتاج الى شرح عملي أكثر من الكتابة.

z-index شرح

اكيد طبعا انت لما هتحرك العناصر من مكانها عن طريق خاصية ال position ممكن عناصر تكون فوق عناصر أخرى (التحرك على محور ال z).
ونحل المشكلة دي عن طريق كود ال z-index: رقم ;

وخاصية ال z-index هي التي تُحدد لنا مين من العناصر الذي سيصبح في الأعلى ومين هيكون في الأسفل؛ والعنصر الذي يحتوي على رقم اعلى هو الذي سوف يُصبح في المقدمة. مثال على ذلك