position: relative;

يحرك العنصر إلى موضع جديد بالنسبة لموضعه الأصلي عن طريق كتابة

top: XX; لتحريكه مسافة XX من القمة

right:XX; لتحريكه مسافة XX من اليمين

bottom:XX; لتحريكه مسافة XX من القاع

left:XX; لتحريكه مسافة XX من اليسار

فمثلاً إن كتبت

position: relative;

top: 32px;

سيتحرك العنصر مسافة 32 بكسل عن القمة(أي إلى أسفل) بالنسبة لموقعه الأصلي

position: absolute;

يحرك العنصر بالنسبة لحدود العنصر الاب الحاوي له الذي له position: relative; فإن لم يجد فيكون بالنسبة للصفحة

وأيضاً يأخذ القيم top: XX; right:XX; bottom:XX; left:XX; لتحديد البعد

لفهم هذه النقطة

بالنسبة لحدود العنصر الاب الحاوي له فإن لم يجد فيكون بالنسبة لشاشة المتصفح

هذا مثال

لنفرض أن العنصر أخذ هذه القيم

position: absolute;

top:5px;

right:5px;

فلدينا توقعين

إما أن يكون العنصر موضوع داخل عنصر آخر(مثلاً داخل div) وهذا الآخر قد أخذ قيمة position: relative;

فسيكون العنصر الداخلي على بعد 5 بكسل من قمة ويمين العنصر الخارجي (div)

أما الاحتمال الثاني ألا يوجد عنصر أب له position: relative;

هنا سيكون العنصر على بعد 5 بكسل من قمة ويمين الصفحة نفسها

إن اختلط عليك الأمر انظر هذا الفيديو فشرحه سهل وسلس

ملحوظة : الشرح في الفيديو بالعامية المصرية

الاول اعتقد يجعل اي شيء ثابت لا يتحرك لست متاكد منه ١٠٠%

اما الثاني يجعل اي عنصر في html يتحرك بحرية ويمكنك ان تضعه في اي مكان في الصفحة

وياتي بعده top ;

و left ;

الاول يجعلك تتحكم به من فوق الى اعلى

و الثاني

من يمين الى اليسار