محمود_سعداوي نشر 6 مارس 2022 أرسل تقرير مشاركة نشر 6 مارس 2022 (معدل) هل لديكم فيديو أو حتى آرتيكل يوضح من خلاله كيفية اإستعمال المتقدم أو المتعدد لposition (absolute,relative...) في لغة css3. تم التعديل في 7 مارس 2022 بواسطة Hassan Hedr توضيح العنوان 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 بلال زيادة نشر 6 مارس 2022 أرسل تقرير مشاركة نشر 6 مارس 2022 الخاصية position في CSS تصف كيف يجب أن يتموضع العنصر في المستند، والخاصيات top و right و bottom و left تُحدِّد المكان النهائي لتلك العناصر. وتحتوي هذه الخاصية على عدة قيم مثل /* الكلمات المفتاحية */ position: static; position: relative; position: absolute; position: fixed; position: sticky; /* القيم العامة */ position: inherit; position: initial; position: unset; القيمة static ، سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية للمستند، ولن يكون للخاصيات top و right و bottom و left و z-index أي أثر، وهذه هي القيمة الافتراضية. الخاصية relative ، سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على الخاصيات top و right و bottom و left، ولن يكون للإزاحة تأثيرٌ على بقية العناصر، أي أنَّ المساحة المحجوزة للعنصر في تخطيط الصفحة هي نفس المساحة المحجوزة إذا كانت هذه الخاصية هي static. ويمكن استخدام الخاصية z-index مع العنصر. الخاصية absolute ، سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى أقرب عنصر أب له موضع نسبي، أو إلى العنصر <body>، وسيُحدَّد موضعه النهائي عبر الخاصيات top و right و bottom و left، ويمكن استخدام الخاصية z-index مع العنصر. ويمكن أن يكون للعناصر المطلقة هوامش margin. الخاصية fixed ، سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى إطار العرض (viewport)، وسيُحدَّد موضعه النهائي عبر الخاصيات top و right و bottom و left، ويمكن استخدام الخاصية z-index مع العنصر. إذا طُبِعَت الصفحة فسيتوضع العنصر في المكان نفسه في كل صفحة. الخاصية sticky ، سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على الخاصيات top و right و bottom و left، ولن يكون للإزاحة تأثيرٌ على بقية العناصر. عند التمرير إلى حدٍّ معيّن فسيتحوّل سلوك العنصر إلى ما يشبه السلوك الناتج عن fixed. يمكنك إلى الرجوع إلى التوثيق الخاص بخاصية position على ويكي حسوب من هنا . 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 7 مارس 2022 أرسل تقرير مشاركة نشر 7 مارس 2022 أيضًا يمكنك الاستفادة من قراءة المقالات التالية وفيها بشكل عام عن أساسيات التموضع positioning في CSS وعن كل من خواص التموضع static, relative, absoulute, sticky, fixed وعن النموذج المبنية عليه النموذج الصندوقي Box Model حاول تطبيق هذه الخواص بنفسك على أمثلة متعددة وهي أفضل طريقة لفهم استخداماتها: اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
هل لديكم فيديو أو حتى آرتيكل يوضح من خلاله كيفية اإستعمال المتقدم أو المتعدد لposition (absolute,relative...) في لغة css3.
تم التعديل في بواسطة Hassan Hedrتوضيح العنوان
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.