1

تعلم تصميم المواقع

انا اواجة مشكلةكبيرة في فهم بعض عناصر ال css المهمة جدا التي بدونها صعب ان اتعامل مع اماكن العناصر

اواجة مشكلة في تعلم عناصر position لا استطيع ان افهمها بشكل جيد وهذا يعيقني جدا عندما اريد تطبيق اي تصميم

انا تعلمت html بنسبة 99% بشكل جيد جدا وطبقت عشرات التطبيقات البسيطة ب html ودخلت علي css وفهمت حوالي 50% من العناصر ولاكن بعض العناصر الهامة في css اري اني لا اعرف ان افهمها ممكن تقلولي حل للمشكلة دي وكمان تدوني مصادر قوية ل css مصادر عربية او اجنبية او مواقع تععلم انا بفضل اتعلم وقت كبير جدا وهذا نتيجتو اني فاهم html كوووويس فانفسي جدا افهم css عشان اعرف اعمل كل التصاميم التي تخطر ببالي ارائكم تهمني جدا جدا وشكرا مقدما


1
Salsa أضف ردا

بالنسبة للposition فهي تحوي عدة خيارات :

كمثال سنفترض أن لدينا صورة و نص في الصفحة :

هذا مجرد نص لنجعله كمثال لشرح القيم بالأسفل

Static : هذا الخيار هو الإفتراضي لكل العناصر الموجودة على صفحة ال html , بمعنى أنه أي عنصر تنشؤه سيكون static , معنى static الوضيفي هو أن العناصر تكون مثل السائل لا تترك فراغات بينها و لا تصعد فوق بعضها البعض .. في مثال الصورة و النص بالأعلى ستجد أن العنصرين ملتصقين بجانب بعضهما و لم تصعد أي منهما فوق الأخرى .. أيضا قيم ال left, right, bottom , top لا تشتغل على العناصر التي قيمة ال position هي static .. أيضا ال margin و float تشتغل عليه بشكل عادي .

Absolute : هذا الخيار يجعل العنصر يتخلى عن مكانه بمقابل أنه يصبح فوق الصفحة .. لشرح هذه النقطة تذكر أننا قلنا أن static مثل السوائل لا تترك فراغات بينها و بين العناصر , فالآن لما نعطي النص خيار position:absolute; فستجد أن الصورة أصبحت فوق النص و السبب هو أن العناصر التي فوق الصفحة ستعامل ذلك العنصر الذي قيمة وضعيته absolute على أنه غير موجود في الصفحة .. و أيضا القيم top, right , bottom , left تشتغل عليه و القيم margin و float لا تشتغل عليه .

Relative : مثل ال absolute غير أنها تحتفظ بمكانها الأصلي (الأولي) , عكس ال absolute التي تتخلى عن مكانها .

Fixed : تشبه ال absolute إلا في شيئ واحد و هو أن وضعيتها تكون بالنسبة للنافذة و ليس مثل ال absolute التي وضعيتها تكون بالنسبة للصفحة .. يعني أن العنصر سيتمركز بالنسبة لطول شاشة جهازك .

Sticky : هذه قم بالبحث عنها .