يلعب موقع عناصر HTML دورًا حيويًا في تنظيم مكونات صفحة الويب. وبشكل أكثر تحديدًا ، يمكن ضبط موضع العناصر من خلال استخدام CSS ' وضع ' خاصية. يمكن ربط هذه الخاصية بخصائص الإزاحة ، مثل الخصائص العلوية واليسرى واليمنى والسفلية ، مما يوفر قيمًا محددة لضبط العنصر في الصفحة. ومع ذلك ، فإن “ مطلق 'يمكن ضبط العناصر المتوضعة بالنسبة إلى أقرب عنصر تم وضعه.
سيشرح هذا المنشور تحديد المواقع المطلق لـ CSS.
خاصية CSS 'position'
ال ' وضع 'في CSS لضبط موضع العنصر. القيم المختلفة لخاصية الموضع ثابتة ، مطلقة ، نسبية ، ثابتة ، وثابتة. يتم تعيين هذه القيم مع خصائص الإزاحة ، مثل أعلى ، ويمين ، ويسار ، وأسفل ، لضبط موضع العنصر.
كيفية تطبيق CSS Absolute Positioning؟
يمكن تطبيق الوضع المطلق للعنصر باستخدام CSS ' وضع 'الملكية بالقيمة' مطلق '. يتم ضبط العنصر ذو الموضع المطلق بما يتوافق مع أقرب عنصر أصل له موضعه. ولكن إذا لم يتم وضع الأصل ، فسيتم ضبطه بالنسبة إلى قسم النص في المستند.
مثال
دعونا نفهم المفهوم بمثال عملي.
الخطوة الأولى: إنشاء ملف HTML
في ملف HTML ، داخل عنصر النص ، أضف div باسم الفئة ' رئيسي '. بعد ذلك ، داخل div الذي تم إنشاؤه ، أضف علامة HTML مرتبطة بالسمات التالية:
-
- ' src 'رابطًا للصورة.
- ' صف دراسي 'في CSS لتصميم العناصر.
- ' كل شىء ”النص الذي يظهر مكان الصورة إذا فشل تحميل الصورة على الصفحة.
- ' كل شىء ”النص الذي يظهر على الصفحة بدلاً من الصورة إذا فشل تحميل الصورة على الصفحة.
بعد ذلك ، أضف div آخر يحتوي على عنصري h1 و p في العنوان والفقرة:
< شعبة صف دراسي = 'رئيسي' >< شعبة صف دراسي = 'المحتوى' >
< IMG src = 'images / linuxlogo.png' صف دراسي = 'الصفحة الرئيسية' كل شىء = 'شعار linux' العرض = '80 بكسل' >
< h1 > تحديد المواقع المطلق CSS h1 >
< ص > مرحبًا بفريق Linuxhint ! ص >
شعبة >
شعبة >
في CSS ، يتم استخدام العديد من خصائص التصميم لتزيين عناصر HTML.
الخطوة 2: نمط 'جميع' العناصر
* {عائلة الخطوط: Verdana، Geneva، Tahoma، sans-serif؛
}
تم تصميم عناصر HTML باستخدام ' خط العائلة 'الملكية بالقيمة' Verdana، Geneva، Tahoma، sans-serif '. تضمن قائمة القيم هذه أنه إذا كان المستعرض لا يدعم النمط الأول ، فسيتم تطبيق النمط الآخر.
الخطوة 3: نمط 'home' div
.الصفحة الرئيسية {الموقف: مطلق.
أعلى: 50 بكسل ؛
اليسار: 45 بكسل ؛
}
فيما يلي الخصائص المطبقة على ' الصفحة الرئيسية 'div:
-
- ' وضع 'تحدد موضع العنصر. هنا ، تمت إضافة ' مطلق 'سيضع العنصر المتعلق بقسم النص في HTML.
- ' أعلى 'يتم استخدام خاصية التعديل الرأسي للعنصر.
- ' اليسار 'يتم استخدام الخاصية' للتعديل الأفقي للعنصر.
الخطوة 4: نمط 'المحتوى' div
.المحتوى {لون الخلفية: cadetblue.
العرض: 300 بكسل ؛
الارتفاع: 250 بكسل ؛
المساحة المتروكة: 40 بكسل ؛
الهامش الأيسر: 80 بكسل ؛
}
فيما يلي خصائص CSS التي يتم تطبيقها على ' المحتوى 'div:
-
- ' لون الخلفية 'تعيين لون خلفية العنصر.
- ' العرض 'تحدد عرض العنصر.
- ' ارتفاع 'تحدد ارتفاع العنصر.
- ' المساحة المتروكة لليسار 'لإضافة مساحة إلى الجانب الأيسر من محتوى العنصر.
- ' الهامش الأيسر 'تحدد الخاصية المساحة على الجانب الأيسر من العنصر.
في هذه المرحلة ، ستبدو صفحة الويب الخاصة بنا كما يلي:
يمكن أن نرى من النتيجة أعلاه أن صورة منزل div موضوعة على 50 بكسل من أعلى و 45 بكسل من يسار نص المستند. علاوة على ذلك ، يتم تعيين موضع div المنزل بالنسبة إلى قسم النص الأساسي في HTML.
كيفية ضبط موضع العنصر 'النسبي' للعنصر الرئيسي الموضع؟
سيرشدك هذا القسم إلى ضبط موضع العنصر بالنسبة إلى أقرب عنصر أصل للموضع.
تعيين 'موقع' خاصية 'المحتوى' div
الموقف: نسبي ؛
لضبط موضع العنصر بالنسبة للعنصر الأصلي ، اضبط ' وضع 'الخاصة بالعنصر الأصل لـ' نسبيا ' القيمة.
قم بتعيين خاصية 'position' لعنصر 'img'
.الصفحة الرئيسية {الموقف: مطلق.
أعلى: 100 بكسل ؛
اليسار: 220 بكسل ؛
}
هنا:
-
- ' وضع 'مع تعيين القيمة على أنها' مطلق 'بالنسبة للعنصر الأصل (أي ، يتم تعيين موضع div المحتوى بالقيمة النسبية).
- ' أعلى 'يتم استخدام الخاصية لتحديد موضع العنصر من الأعلى.
- ' اليسار 'يتم استخدام الخاصية لتحديد موضع العنصر من اليسار.
انتاج |
يمكن أن نرى من النتيجة أن الصورة قد تم وضعها بالنسبة إلى عنصر div الخاص بها ، ويبدو أنها مناسبة.
استنتاج
CSS ' وضع 'لتعيين موضع عناصر HTML. يمكن تقييم هذه الخاصية على أنها ثابتة ونسبية ومطلقة وثابتة وثابتة. ال ' مطلق 'قيمة العنصر المطابق للعنصر الأصل القريب الموضع. لقد أوضح هذا المنشور وضع CSS المطلق بمثال عملي.