الفصل 10: الترتيب (Z-index) والشفافية (Opacity)

إزاي تتحكم في ترتيب الطبقات وشفافية العناصر؟ (بالعامية المصرية)

---

أولًا: 📚 يعني إيه Z-index؟

z-index هي الخاصية اللي بتقول للمتصفح:

“الطبقة دي فوق، ودي تحت، ودي في النص”…
يعني بتتحكم في ترتيب ظهور العناصر فوق بعض لما يحصل تراكب.

---

🧠 مثال بسيط:

تخيل عندك 3 صناديق فوق بعض، واحد فيهم لونه أحمر، واحد أزرق، واحد أخضر.
لو كلهم في نفس المكان، آخر واحد في الكود هو اللي هيبان فوق.

لكن لو استخدمت z-index تقدر تحدد مين يطلع فوق ومين يختفي وراه.

cssCopy code.box1 {
  position: absolute;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 2;
}

🔺 كل ما الرقم يعلى، كل ما العنصر يطلع لفوق أكتر.

---

⚠️ ملاحظة مهمة:

z-index مايشتغلش غير لما يكون العنصر عنده position غير static
يعني لازم يكون:

• relative
• absolute
• fixed
• sticky

لو كتبته على عنصر بـ position: static مش هيأثر في حاجة.

---

🎯 مثال عملي:

htmlCopy code<div class="red-box">أحمر</div>
<div class="blue-box">أزرق</div>

cssCopy code.red-box {
  position: absolute;
  top: 50px;
  left: 50px;
  background: red;
  z-index: 3;
}

.blue-box {
  position: absolute;
  top: 70px;
  left: 70px;
  background: blue;
  z-index: 1;
}

النتيجة: الأحمر هيطلع فوق الأزرق حتى لو جه قبله في الكود.

---

ثانيًا: 🌫️ Opacity – الشفافية

opacity بتتحكم في درجة وضوح العنصر، من 0 (شفاف تمامًا) لـ 1 (واضح تمامًا).

cssCopy codeimg {
  opacity: 0.5; /* نص شفاف */
}

---

قيم opacity:

القيمة	المعنى
1	شفاف 0% = ظاهر 100%
0.5	شفاف 50%
0	شفاف تمامًا – غير مرئي

---

✅ تستخدم opacity في:

• الصور اللي عايز تخليها خفيفة على الخلفية
• الزرار وقت الـ hover
• المودالات والنوافذ اللي فوق الصفحة

---

✨ مثال على تأثير الـ opacity:

cssCopy codebutton {
  background-color: green;
  color: white;
  opacity: 0.7;
}

button:hover {
  opacity: 1;
}

لما الماوس يقرب من الزر، الشفافية تختفي ويبان واضح.

---

❗ خد بالك:

لما تستخدم opacity على عنصر، كل اللي جواه كمان هيتأثر بنفس النسبة.
يعني لو عندك زر فيه صورة وكلام، كله هيبقى شفاف بنفس الدرجة.

لو عايز تخلي الخلفية بس شفافة وتسيب المحتوى واضح؟
استخدم rgba بدل opacity:

cssCopy codebox {
  background-color: rgba(0, 0, 0, 0.5); /* خلفية بس شفافة */
}

---

🔚 خلاصة الفصل:

الخاصية	الاستخدام
z-index	ترتيب الطبقات لما العناصر تبقى فوق بعض
opacity	درجة الشفافية للعنصر بالكامل
rgba()	تستخدم للشفافية في الخلفيات بس