ما هو ال Position في Css وما هي أنواعها ومتى يتم استخدامها ؟!
في هذه المقالة الشيقة سوف نلقي نظرة على كيفية التحكم في مكان كل عنصر في صفحة وذلك عن طريق خاصية الـ position والتى لها العديد من الاستخدامات والخواص المتعددة ،باستخدام هذه الميزة تستطيع التحكم الكامل في مكان العناصر وتعديل مكانها ولعلك تتساءل عن القيمة الافتراضية لـ position التي يتم اعطاها مباشرتا الى اي عنصر الا وهي ال static واي قيمة غيرها تسمى positioned element ولابد أن نتساءل هنا ما هي تلك العناصر( التمركز النسبي Relative – التمركز المطلق Absolute – التمركز الثابت Fixed – التمركز الزج sticky ) ولابد من وجود خصائص مميزة يتم استخدامها مع عناصر التمركز positioned element الا وهي ( خاصية right / خاصية left / خاصية top / خاصية bottom ) والآن نستعرض عناصر التمركز باسلوب سهل وواضح بحيث يستطيع كل مواطن عربي الاستمتاع بالقراءة وايضا يستطيع الاستفادة والآن هيا بنا نستعرض عناصر position بالتفصيل ويتم سردهم بالترتيب كالاتي (التمركز الطبيعي Normal – التمركز النسبي Relative – التمركز المطلق Absolute – التمركز الثابت Fixed – التمركز الزج sticky ) هو أول نوع من أدوات التمركز ويتم تطبيقه بشكل مباشر على اى عنصر دون الحاجة لكتابة أمر التنفيذ static مما يؤدي إلى ظهور كل عنصر على سطر جديد وبالتالى اذا اردت ان يكون هناك عنصر بجانب عنصر آخر فلن تستطيع عمل ذلك وفهم هذه الأداء لابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا التمركز النسبي Relative هو ثاني نوع من أدوات التمركز ويتم تطبيقه للتخلص من عدم القدرة على التحكم الكامل في العنصر وبالتالي يتيح لنا فرصة في التحكم بالعنصر من خلال تحويله إلى أعلى أو يمين أو أسفل أو يسار لاحظ أنه سيتحرك في نفس المنطقه الخاصه به على عكس Absolute مما يؤدي الى عدم التاثير على العناصر الاخرى وهذا النوع من التمركز يظل المكان القديم الخاص به فارغ الى ان يتم تعديل عليه وذلك من خلال كود التنفيذ وعندما يتم تحريكه يتحرك في حدود المكان الخاص به فقط وفهم هذه الأداء لابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا التمركز المطلق Absolute هو ثالث نوع من أدوات التمركز وهو يختلف من حيث القدرة على الخروج من المكان الذي يتمركز فيه بين العناصر دون التأثير على باقي العناصر الاخرى وعندما يتم تنفيذ الكود الخاص به سيتم حذف العنصر من التدفق الطبيعي وبالتالي يستطيع أن يتحرك بكامل حريته الى المكان الذي يريده دون التقيد بباقي العناصر حوله وبالنسبه للمكان القديم الخاص به فانه يتم الاستحواذ عليه فور خروجه من بين العناصر الاخرى ملحوظه العنصر Absolute يتحرك بالنسبة لاقرب اب لديه position وفي حالة عدم وجود اب يحتوي على position فإنه يتحرك حسب هوامش الصفحة لابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا: التمركز الثابت Fixed هو رابع نوع من أدوات التمركز هذا النوع يشترك في العديد من الخصائص مع Absolute وذلك من خلال الحريه التامه في التحرك إلى أي مكان ولكن الاختلاف الوحيد أن هذا النوع من التمركز يتحرك ولكن يظل ثابت مع عمل scroll على الصفحه وبذلك فهو يختلف عن باقي العناصر الاخرى التي تتحرك مع تحرك الصفحه وبالنسبه للمكان القديم الخاص به فانه يتم الاستحواذ عليه فور خروجه من بين العناصر الاخرى ملحوظة هنا العرض بيتحدد حسب حجم المحتوى الذي بداخله لابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا: ستجد في هذا المثال ان تم اعطاء المستطيل الاحمر قيمه التمركز الثابت Fixed حيث انه اذا قمت باعمل scroll ستد ان المستطيل الاحمر ظل ثابت على عكس باقي العناصر التمركز الزج sticky هو خامس نوع من أدوات التمركز هذا النوع يشترك في العديد من الخصائص مع Fixed Positioning حيث أنه يشبه في عدم التحرك ويظل ثابت ويختلف اختلافا جوهريا في خصيتين اولا انه لا يتم الاستحواذ على المكان الخاص به وذلك لانه لا يترك مكانه ويقوم برجوع له عندما تقوم بالاشارة الى مكانه بالموس ثاني خاصيه انه يرتبط بالأب الخاص به واذا قمت بعمل scroll داخل حاوية تحتوي على اب اخر فانه لا يظهر الا في الحاوية الخاصة به فقط على عكس Fixed Positioningلابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا: z-index هذه الخاصية تتعلق فقط بعناصر ال position من حيث المشاكل التي قد تواجهك وعلى سبيل مثال تداخل العناصر الذي ينتج عن اختيار قيمة معينة من ال 4 قيم من قيم ال position لتحريكها من مكان الى آخر مما يؤدي إلى وجود عناصر فوق عناصر اخرى وهنا ياتي دور ال z-index من خلال دورها في تحديد العناصر بسؤال اي من العناصر ستكون في الاعلى واي منها سيكون بالاسفل وكلما زاد قيمة العنصر كلما كان له الاولويه في أن يكون في المقدمه لابد ان تنظر الى المثال التالي وتقوم بتطبيقه مباشرتا ما هو ال Position في Css
ما هي أنواع ال Position
الخواص الاساسيه المستخدمه مع ال position
التمركز الطبيعي Normal
في هذا المثال قمنا بانشاء ثلاث فقرات وفصلنا بينها بهامش علوي 40px وظللنها بمسطيل احمر لتصل الفكرة على اكمل واجة.
وتجد في هذا المثال ان الفقرة الثانية ذات المستطيل الاحمر تحركت بمقدار 20px الى الاعلى وستجد ايضا انها تحركت بمقدار 50px الى اليسار دون التأثير على العناصر الاخرى فى باقي الصفحه
في هذا المثال ستجد انة تم اعطاء خلفية خضراء كبيرة واعطاء لها إرتفاع بمقدار 200px وتزويدها ب position: relative وستجد ان هذة الخاصيه من اساسيات التمركز المطلق Absolute لانه لابد من وجود اب يحتوي على position ، ومن خلال إستخدام خواص اعلى واليسارتحرك من أعلى العنصر الأخضر بمقدار 50px و من يساره بمقدار 50px أيضاً
مقالات قد تفيدك
1- كيف يعمل الويب
2- ما هي المواقع ثابتة وديناميكية
3- موقع مفيد لتعلم البرمجه
وفى نهاية هذه المقالة، أود أن أشكر كل من ساعدني بفكرة في إنجاز هذه المقالة، والذي يعلم الله كم المجهود الذي بذل فيها، كما ُأريد أن أشكر كل القراء على حُسن متابعتهم، سائلاً المولى عز وجل أن أكون وُفقت في توصيل الهدف من المقالة، ولأن مقالتنا اليوم كانت مليئة بالمعلومات القيمة التي لا تنتهي فنحن على موعد في لقاء اخر ومقاله جديده.. واتمنى ان اكون قد اجبتكم على كل اسئلتكم في مقاله اليوم وهي “ما هو ال Position في Css وما هي انواعها ومتى يتم استخدامها وكيفيه حل مشاكلها ب Z-index” والسلام عليكم ورحمة الله وبركاته.الخاتمة
