استخدام الـ positions و display:flex و grid في CSS والفرق بينهم وكيفية تطبيقهم لتصميم صفحة كاملة

الـ Flex والـ Grid هما البديل الحديث لـ Float لتخطيط وتصميم الصفحة، وستجد تفصيل هنا:

أما بخصوص position فالأمر يعتمد على التصميم الخاص بك، ولها قيم مختلفة وستجد تفصيل هنا:

وبشكل أساسي ستحتاج إما استخدام Flex أو Grid أو خليط بينهم على حسب التصميم، والـ Grid بحاجة إلى ممارسة لاستيعابه والتمكن من استخدام الخواص المختلفة له، على عكس Flex فهو أسهل نسبيًا لكن بالطبع في بعض التصاميم سيتعين عليك استخدام Grid.

بالإضافة للشرح الرائع في التعليق السابق يجب توضيح أن استخدام Flex أو Grid ليس له علاقة لاستخدام position حيث تعتبر استخدامات position تعتمد على عدة حالات يمكن استخدام الـ positions في CSS:

relative position: يتم وضع العنصر بشكل نسبي إلى موقعه الطبيعي في صفحة الويب. يتم تحديد التحرك بالـ top/bottom و left/right. يظل العنصر في مكانه الطبيعي ويتحرك العناصر الأخرى حوله.

absolute position: يتم وضع العنصر بشكل مطلق داخل أقرب أب له position غير static. إذا لم يكن هناك أصول لها position غير static فسيأخذ العنصر المطلق موقعه بالنسبة للصفحة كلها. يتم تحديد الموقع بالـ top/bottom و left/right.

fixed position: مماثل للـ absolute إلا أن العنصر ذو الوضعية الثابتة لا يتحرك مع محتوى الصفحة بل يبقى في مكانه الثابت.

sticky position: شبه الـ relative إلا أن العنصر يلتصق في رأس الصفحة/أعلى المحتوى عندما يبدأ المستخدم بالتمرير.

بشكل عام نستخدم الـ positions عندما نريد تحكم أكبر في موقع وتحرك عناصر معينة عن تدفق الصفحة العادي.