الفصل 8: الوضعيات (Position) في CSS

static – relative – absolute – fixed – sticky
(بالعامية المصرية)

---

🎯 يعني إيه Position أصلاً؟

خاصية position بتحدد إزاي ومكان العنصر يتعرض على الصفحة.
يعني بتتحكم في مكان العنصر بالنسبة للصفحة أو بالنسبة للعناصر التانية.

---

1️⃣ position: static

دي الوضعية الافتراضية لأي عنصر، يعني العنصر بيتعرض حسب ترتيبه في الكود.

cssCopy codediv {
  position: static;
}

🟠 لما تستخدم static:

• مش هينفع تحرك العنصر بـ top, left, right, bottom
• المتصفح بيعرضه في مكانه الطبيعي

---

2️⃣ position: relative

دي بتخلي العنصر في مكانه الطبيعي لكن تقدر تزقه شوية باستخدام:

• top
• left
• right
• bottom

cssCopy code.box {
  position: relative;
  top: 20px;
  left: 30px;
}

🎯 كأنك بتقوله: “خليك في مكانك… بس اتحرك سنة كده”.

---

3️⃣ position: absolute

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

cssCopy code.box {
  position: absolute;
  top: 0;
  right: 0;
}

📌 لو الأب بتاع العنصر فيه position: relative، العنصر هيتحرك بالنسبة له.
لو الأب مفيهوش position، العنصر هيطلع يتحرك بالنسبة لكل الصفحة.

---

4️⃣ position: fixed

يعني العنصر يثبت مكانه في الشاشة حتى لو الصفحة اتعملها Scroll.

cssCopy code.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

💡 مفيد في:

• القوائم اللي دايمًا تبقى فوق
• الزرار اللي بيفتح واتساب أو شات

---

5️⃣ position: sticky

ده هجين كده بين relative و fixed.
يعني: “افضل في مكاني لحد ما المستخدم يوصل لي، بعدها اثبت فوق”.

cssCopy code.header {
  position: sticky;
  top: 0;
  background: white;
}

🟢 مفيد جدًا في الترويسة (العناوين اللي بتفضل ظاهرة فوق لما تنزل تحت).

---

🔍 مثال عملي سريع:

htmlCopy code<div class="parent">
  <div class="child">أنا مطلق Absolute</div>
</div>

cssCopy code.parent {
  position: relative;
  height: 300px;
  background: lightgray;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
  background: orange;
  padding: 10px;
}

🎯 هنا: العنصر .child هيتحرك بالنسبة للأب .parent لإنه عنده position: relative

---

📊 مقارنة سريعة بين الوضعيات:

النوع	مكان العنصر في الترتيب؟	يشتغل مع top/left؟	يتحرك مع الصفحة؟
static	في مكانه الطبيعي	❌	✅
relative	في مكانه الطبيعي + حركة	✅	✅
absolute	بيخرج من الترتيب	✅	✅
fixed	ثابت في الشاشة	✅	❌
sticky	متغير حسب السكروول	✅	❌ لما يوصل للمكان