خصائص position CSS

التعريف والاستخدام

خصائص position تحدد نوع التثبيت للمكون.

شرح

تعرف هذه الخاصية على آلية التحديد المستخدمة لإنشاء ترتيب العناصر. يمكن تحديد أي عنصر، ولكن العناصر المطلقة أو الثابتة تُحدث حجرة مستقلة، بغض النظر عن نوع العنصر نفسه. العناصر النسبية تُحدث تحديدًا بالنسبة لموضعها الطبيعي في التدفق.

انظر أيضًا:

دليل CSSتحديد الموضع CSS

دليل HTML DOMخصائص الموضع

مثال

تحديد موضع h2

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

جرب بنفسك

جملة CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

قيمة الخاصية

القيمة الوصف
مطلق

يُحدث العنصر مع تحديد الموضع المطلق، موضع العنصر بالنسبة لأول عنصر أم يُحدد موضعه ثابتًا.

يُحدد موضع العنصر من خلال خصائص "left", "top", "right" و "bottom".
ثابت

يُحدث العنصر مع تحديد الموضع المطلق، موضع العنصر بالنسبة للنافذة الخاصة بالمتصفح.

يُحدد موضع العنصر من خلال خصائص "left", "top", "right" و "bottom".
نسبي

يُحدث العنصر مع تحديد الموضع النسبي، موضع العنصر بالنسبة لموضعه الطبيعي في التدفق.

لذلك، "left:20" سيضيف 20 بكسل إلى موضع LEFT للعنصر.
ثابت القيمة الافتراضية. لا يوجد تحديد للموضع، يظهر العنصر في التدفق الطبيعي (يُتجاهل top, bottom, left, right أو z-index).
وراثة يحدد هذا يجب أن يتم تمرير قيمة خاصية position من العنصر الأم.

تفاصيل التقنية

القيمة الافتراضية: ثابت
الوراثة: لا
الإصدار: CSS2
جافا سكربت الجملة: object.style.position="absolute"

TIY مثال

تحديد الموضع: تحديد الموضع النسبي
هذا المثال يوضح كيفية تحديد موضع العنصر بالنسبة لموضع العنصر الطبيعي.
تحديد الموضع: تحديد الموضع المطلق
هذا المثال يوضح كيفية استخدام القيم المطلقة لتحديد موضع العنصر.
تحديد الموضع: تحديد الموضع الثابت
هذا المثال يوضح كيفية تحديد موضع العنصر بالنسبة للنافذة الخاصة بالمتصفح.
ضبط شكل العنصر
هذا المثال يوضح كيفية ضبط شكل العنصر. يتم قطع هذا العنصر إلى هذا الشكل وعرضه.
Z-index
Z-index يمكن استخدامها لوضع عنصر بعد عنصر آخر.
Z-index
العنصر في المثال أعلاه قد تم تغيير Z-index.

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0