الربح من Clickworker في 2026

 ما هي خاصية position؟

تُستخدم خاصية position لتحديد طريقة تموضع العنصر في الصفحة بالنسبة إلى الصفحة نفسها أو إلى عناصر أخرى.

---

القيم الأساسية لـ position:

القيمة	الوصف
static	الوضع الافتراضي – العنصر يتموضع بشكل طبيعي وفق تدفق الصفحة
relative	يتموضع بالنسبة إلى مكانه الأصلي
absolute	يتموضع بالنسبة لأقرب عنصر أب له position غير static
fixed	يتموضع بالنسبة إلى نافذة العرض (ويبقى ثابتًا عند التمرير)
sticky	يبقى ثابتًا في الأعلى عند التمرير حتى يصل إلى نقطة معينة

---

مثال عملي على كل نوع:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: #d1e7dd;
      margin-bottom: 20px;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background-color: #f8d7da;
    }

    .absolute-container {
      position: relative;
      height: 150px;
      background-color: #cfe2ff;
    }

    .absolute {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #ffeeba;
      padding: 10px;
    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background-color: #f5c6cb;
      padding: 10px;
      width: 100%;
    }

    .sticky {
      position: sticky;
      top: 0;
      background-color: #d4edda;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="fixed">عنصر Fixed (ثابت في الأعلى)</div>

  <div style="height: 60px;"></div> <!-- مسافة لتجربة fixed -->

  <div class="box">Static Box (افتراضي)</div>

  <div class="box relative">Relative Box (تحرك قليلاً من مكانه)</div>

  <div class="absolute-container">
    Container يحتوي على عنصر Absolute
    <div class="absolute">Absolute Box</div>
  </div>

  <div style="height: 500px;">
    <div class="sticky">Sticky Box (يلتصق عند التمرير)</div>
    <p>مرر للأسفل لرؤية تأثير sticky.</p>
  </div>

</body>
</html>

---

ملاحظات مهمة:

• عند استخدام absolute يجب أن يكون العنصر الأب position: relative ليتم التموضع داخله.
• fixed مفيد للـ headers الثابتة أو الأزرار الطافية.
• sticky يجمع بين relative و fixed: يبدأ عادي ثم يثبت عند التمرير.

---

الواجب العملي:

1. أنشئ عدة عناصر باستخدام position: relative و absolute وجرّب التحكم في top, left.
2. اصنع شريط علوي ثابت باستخدام position: fixed.
3. جرّب sticky مع عنصر داخل مقالة طويلة.

تعديل المقال