خاصية position في Css

من الطبيعي والإفتراضي أن تأخذ العناصر مكانها في الموقع على حسب وجودها في الكود أو شيفرة html فمثلًا العنصر الموجود في الكود أولاً يكون موجود في الموقع أولاً 

ولكن عند إضافة الخاصية position تقوم هذه الخاصية بتغيير مكان العنصر الإفتراضي والطبيعي والفرق بين ال relative و ال absolute 

• Relative تمكننا من تحريك العنصر من مكانه الطبيعي أي يبقى العنصر في مكانه في حالة عدم تحديد خصائص left right top or bottom 
• أما بالنسبة ل absolute تمكننا من تحريك العنصر ولكن ليس من كانه الطبيعي، بل، من أقرب عنصر له خاصية position relative أو إن لم تكن موجودة يكون من ال body

ويتم توضيح الشرح من خلال الصورة التالية

يمكنك قراءة المزيد من المعلومات من هنا

يقوم المتصفح بإظهار عناصر HTML بالترتيب كما هي مكتوبة في الكود ويكون مكان position العناصر الإفتراضي ثابت static

خاصية position بمعنى مكان تقوم بتحديد نوع مكان العنصر والقيمة الإفتراضية تكون static بمعنى ثابت قيم الخاصية position هي 

• static ثابت وهي القيمة الافتراضية وتظهر العناصر بالترتيب وفقاً لمجرى أو مسار المستند
• relative نسبي ويكون مكان العنصر نسبي بالنسبة الى مكانه الأصلي ، فإذا قمنا بكتابة left:20px فسيتم إضافة 20px الى اليسار من مكانه الأصلي
• fixed ثابت بالنسبة لنافذة المتصفح
• absolute مطلق ويكون ثابت في مكانه الأصلي والعناصر الأخرى تتجاهل أنه في هذا المكان فتكون خلفه
• sticky ملتصق ويكون مكان العنصر بناءً على تحرك التمرير scroll

ببساطه position هو مكان عنصر من عنصر اخر اى ان ال p جوا div هيكون فين؟؟

relative تعطى للعنصر الاب و absolute للعنصر الابن وعن طريقها يمكن تحديد مكان الابن داخل الاب ب top left right bottom 

مثال: لو div يحتوى ع p وعاوزه p يكون فى اعلى يمين div

هعطى div {position: relative}✓

و p {position: absolute} وهبدا اعطى قيم عشان احدد مكان p 

p{ top: 10px ; right:10px{ 

كده p هيتواجد فوق ف الdiv نازل من top 10px و متحرك من right نفس القيمه وهكذا. ارجو تكون اجابتى ساعدتك ووضحتلك الفكرة ^^