ممكن حد يشرح لي هذين الامرين و شكرا html/css
position: relative;
position: absolute;
position: relative; position: absolute; html/css ممكن الشرح
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 بكسل من قمة ويمين الصفحة نفسها
إن اختلط عليك الأمر انظر هذا الفيديو فشرحه سهل وسلس
ملحوظة : الشرح في الفيديو بالعامية المصرية
التعليقات