عناصر تحديد المواقع على صفحة ويب مع خاصية وضع CSS
قبل Cascading Style Sheets ، كنت محدودة في السيطرة على موضع الكائنات على صفحة الويب الخاصة بك. يمكنك استخدام جدول HTML للتحكم في الموضع قليلاً ولكن هذا لم يكن دقيقًا للغاية. الآن مع CSS ، يمكنك التحكم بدقة في كيفية وضع كل عنصر على صفحة الويب الخاصة بك.

قبل أن تتمكن من استخدام خاصية موضع CSS لوضع العناصر على صفحة الويب الخاصة بك ، نحتاج إلى مناقشة المصطلحات المستخدمة للتواصل مع متصفح الويب. لا تأخذ CSS في الاعتبار فقط عرض صفحة الويب الخاصة بك وارتفاعها ، بل تتناول أيضًا أبعاد متصفح الويب.
  • متصفح العرض والارتفاع
    في البداية ، قد تعتقد أن هذا يشير إلى نافذة المتصفح المفتوحة. ولكنه يشير بالفعل إلى المستعرض بأكمله بما في ذلك عناصر التحكم والأزرار.

  • يعيش العرض والارتفاع
    هذا هو المصطلح الخاص بمنطقة عرض المستعرض. لا يشمل الضوابط.

  • عرض المستند والارتفاع
    هذا هو العرض والارتفاع الكامل لصفحة الويب الخاصة بك. إذا كانت هذه الأبعاد أكبر من العرض والارتفاع Live ، فسيعرض المستعرض أشرطة التمرير حسب الحاجة.
الآن بعد أن تعرفت شروط الحدود التي يمكنك من خلالها وضع أجزاء من صفحة الويب الخاصة بك باستخدام CSS ، دعونا نلقي نظرة على قيم الموضع الأربعة.
  • ثابتة
    هذا هو الافتراضي. ما لم تحدد خلاف ذلك لعنصر ، فإن المتصفح سوف يستخدم تحديد المواقع الثابتة. تمامًا كما يبدو ، مع تحديد موضع ثابت ، لا يمكنك تغيير موضع العناصر على صفحة الويب. فكيف يحدد المتصفح مكان وضع كل كائن على صفحة الويب الخاصة بك؟ يقوم بوضع كل عنصر بترتيب حدوثه في كود HTML الخاص بك. إذا كانت لديك صورة شعار ، ثم تحية ، ثم إشعار حقوق الطبع والنشر في HTML الخاص بك ، فإن المتصفح سوف يضعها على صفحة الويب بهذا الترتيب. لا يمكنك تحريك التحية فوق صورة الشعار.

  • نسبيا
    يعمل الموضع النسبي كما هو ثابت حيث أن ترتيب العناصر في كود HTML يتحكم في تدفق العناصر على الصفحة. ومع ذلك ، يمكنك استخدام الموضع النسبي للتحكم في موضع العنصر بالنسبة للعناصر الأخرى على صفحة الويب.

  • مطلق
    عندما تستخدم الموضع المطلق مع عنصر ، فإن هذا سيجعل هذا العنصر مستقلاً عن بقية صفحة الويب. نظرًا لأن موضعه لم يعد محددًا بترتيب HTML ، فستحتاج إلى استخدام إحداثيات X و Y لوضع العنصر.

  • ثابت
    هذا يعمل نفس المواقع المطلقة. ومع ذلك ، لن يتم تمرير العنصر الذي تم تحديد موضعه الثابت مع صفحة الويب. هذه ميزة لطيفة لاستخدامها لشعار أو قائمة ترغب في أن تظل مرئية أثناء تمرير الصفحة لأعلى.




تعليمات الفيديو: الدرس [5] دورة HTML : تغيير مكان الصورة داخل واجهة الموقع (مارس 2024).