♦️position في CSS♦️
من اكثر المواضيع اللي ضيعتني في بداية تعلمي لcss😄
في هذا الثريد سأشرح عن كيف تستخدام انواع position المختلفة
من اكثر المواضيع اللي ضيعتني في بداية تعلمي لcss😄
في هذا الثريد سأشرح عن كيف تستخدام انواع position المختلفة
اولا يجب علينا التعرف على ما هي خاصية position:
هي خاصية تحدد نوع طريقة ظهور العنصر في الصفحة
وانواعها:
1- static
2- relative
3- fixed
4- absolute
5- sticky
هي خاصية تحدد نوع طريقة ظهور العنصر في الصفحة
وانواعها:
1- static
2- relative
3- fixed
4- absolute
5- sticky
1- static:
هي القيمة الافتراضية لعناصر html
لا تتأثر العناصر الثابتة الموضوعة بالخصائص top, bottom, left,right، بعكس جميع الخواص الاخرى
هي القيمة الافتراضية لعناصر html
لا تتأثر العناصر الثابتة الموضوعة بالخصائص top, bottom, left,right، بعكس جميع الخواص الاخرى
2- relative:
يتم وضع العنصر وفقًا للتدفق الطبيعي للمستند ، ثم يتم إزاحته بالنسبة لنفسه بناءً على قيم top, bottom, left ,right
لا يؤثر الإزاحة على موضع أي عناصر أخرى، وبالتالي ، فإن المساحة المعطاة للعنصر في تخطيط الصفحة هي نفسها كما لو كان الموضع static
يتم وضع العنصر وفقًا للتدفق الطبيعي للمستند ، ثم يتم إزاحته بالنسبة لنفسه بناءً على قيم top, bottom, left ,right
لا يؤثر الإزاحة على موضع أي عناصر أخرى، وبالتالي ، فإن المساحة المعطاة للعنصر في تخطيط الصفحة هي نفسها كما لو كان الموضع static
3- absolute:
العنصر ذو موقع absolute يتم وضعه بالنسبة إلى أقرب parent تم وضعه فيه.
واذا لم يكن هنالك حاوية parent يوضع بالنسبة ل layout
الفرق بين relative و absolute يكون من مكان تواجد العنصر في البداية، التوضيح في الصورة
العنصر ذو موقع absolute يتم وضعه بالنسبة إلى أقرب parent تم وضعه فيه.
واذا لم يكن هنالك حاوية parent يوضع بالنسبة ل layout
الفرق بين relative و absolute يكون من مكان تواجد العنصر في البداية، التوضيح في الصورة
4- fixed:
العنصر ذو موضع fixed يتم وضعه بالنسبة إلى إطار العرض ، مما يعني أنه يظل دائما في نفس المكان حتى إذا تم النزول في الصفحة.
يمكنك وضع القيمة fixed الى القائمة العلوية مثلا لجعلها تظهر حتى عند النزول في الصفحة
العنصر ذو موضع fixed يتم وضعه بالنسبة إلى إطار العرض ، مما يعني أنه يظل دائما في نفس المكان حتى إذا تم النزول في الصفحة.
يمكنك وضع القيمة fixed الى القائمة العلوية مثلا لجعلها تظهر حتى عند النزول في الصفحة
5- sticky:
العنصر ذو موضع sticky يتم وضعه بناءً على موضع التمرير الخاص بالمستخدم.
يبدل العنصر اللاصق بين relative و fixed، اعتمادًا على موضع التمرير.
يتم وضعه relative حتى يتم استيفاء موضع إزاحة معين في منفذ العرض، ثم يتم تثبيته في مكانه (مثل الموضع: fixed).
العنصر ذو موضع sticky يتم وضعه بناءً على موضع التمرير الخاص بالمستخدم.
يبدل العنصر اللاصق بين relative و fixed، اعتمادًا على موضع التمرير.
يتم وضعه relative حتى يتم استيفاء موضع إزاحة معين في منفذ العرض، ثم يتم تثبيته في مكانه (مثل الموضع: fixed).
6- z-index:
عندما يتم وضع العناصر ، يمكن أن تتداخل مع عناصر أخرى.
تحدد خاصية z-index ترتيب العنصر (أي عنصر يجب وضعه أمام العناصر الأخرى أو خلفها).
يمكن أن يكون للعنصر ترتيب موجب أو سلبي
عندما يتم وضع العناصر ، يمكن أن تتداخل مع عناصر أخرى.
تحدد خاصية z-index ترتيب العنصر (أي عنصر يجب وضعه أمام العناصر الأخرى أو خلفها).
يمكن أن يكون للعنصر ترتيب موجب أو سلبي
بهذا نكون قد انتهينا من جميع خواص position
اذا اردت ان اشرح عن موضوع معين خاص ب css او اي موضوع اخر ، يمكنك اقتراحه هنا
شكرا للقرائة واتمنى لكم يوما سعيدا🙏
اذا اردت ان اشرح عن موضوع معين خاص ب css او اي موضوع اخر ، يمكنك اقتراحه هنا
شكرا للقرائة واتمنى لكم يوما سعيدا🙏
جاري تحميل الاقتراحات...