كيفية إنشاء عنصر ثابت في HTML

ستناقش هذه المدونة خاصية موضع CSS وطريقة إنشاء عنصر ثابت في HTML.

ما هي خاصية موقع CSS؟

تحدد خاصية موضع CSS طريقة تحديد الموضع لعناصر HTML ، والتي يمكن أن تكون مطلقة أو ثابتة أو إحصائية أو ثابتة أو وراثية أو نسبية أو أولية.

بناء الجملة

يوضح بناء الجملة الوارد أعلاه أن خاصية الموضع لها قيم مختلفة. يمكن تخصيصها وفقًا لذلك.

الآن ، دعنا نتحقق من الإجراء لإنشاء عناصر ثابتة في HTML.

ما هو موقف CSS: مثبت؟

عنصر HTML الذي يحتوي على ' لزج 'موضع نسبي حتى يصل إلى نقطة ما ثم يتصرف كعنصر لزج.

دعنا نستعرض المثال البسيط لفهم مفهوم الموضع الثابت لـ CSS.

مثال: كيفية إنشاء عنصر ثابت في HTML؟
في ملف HTML ، أضف

للعنوان ، و

للفقرة ، و

التي لها اسم الفئة ' لزج '. بعد ذلك ، أضف علامة

بها قائمة مرتبة متداخلة

مع قائمة
1. .

   ملحوظة : لقد أخذنا قائمة طويلة بحيث يمكنك مراقبة سلوك العنصر اللاصق عند التمرير في صفحتنا.

   لغة البرمجة

   < h2 > الملاحظات اللاصقة: انظر تأثير العنصر اللاصق < / h2 >
   < ص > الموقف: لزجة < / ص >
   < شعبة صف دراسي = 'لزج' > هذه قائمة المهام الخاصة بي! < / شعبة >
   < ص >
   < رأ >
   < الذي - التي > مدير الاتصال < / الذي - التي >
   < الذي - التي > لقاء مع الموظفين < / الذي - التي >
   < الذي - التي > إرسال التقرير < / الذي - التي >
   < الذي - التي > اذهب الى الطبيب < / الذي - التي >
   < الذي - التي > إحجز رحلة طيران < / الذي - التي >
   < الذي - التي > اذهب للمشي. < / الذي - التي >
   < الذي - التي > اذهب للبقالة. < / الذي - التي >
   < الذي - التي > شاهد التلفاز < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < الذي - التي > بعض النصوص. < / الذي - التي >
   < / رأ >
   < / ص >

   بعد ذلك ، سنوفر نمطًا لعنصر div المسمى sticky:

   • هنا، ' .لزج 'يمثل الفئة التي يجب تطبيق خصائص النمط فيها.
   • داخل الأقواس المتعرجة ، سنخصص ' موقع 'قيمة الممتلكات كـ' لزج '.
   • ال ' أعلى 'تم تعيينه كـ' 0 '.
   • ال ' لون الخلفية ' هو ' # 00154f '.
   • اعطي البعض ' حشوة 'إلى div عن طريق تعيين قيمتها كـ' 40 بكسل '.
   • ' حجم الخط ' كما ' 30 بكسل '.
   • ' اللون 'من الخطوط تم تعيينه كـ' أبيض '.

   CSS

   .لزج {
   موقع : لزج ؛
   أعلى : 0 ؛
   لون الخلفية : # 00154f ؛
   حشوة : 40 بكسل ؛
   حجم الخط : 30 بكسل ؛
   اللون : أبيض ؛
   }

   احفظ ملف HTML وافتحه في المتصفح لترى الناتج:

   

   نصيحة إضافية

   من خلال الاستفادة من ' هسلا () '، يمكنك تعيين خلفية شفافة للعنصر اللاصق المضاف على النحو التالي:

   معرفتي - اللون : هسلا ( 0 و 100 ٪ ، 90 ٪ ، 0.8 ) ؛

   انتاج |

   

   هذه هي الطريقة التي يلتزم بها العنصر بالموضع المحدد عن طريق تعيين CSS ' موقع 'قيمة الممتلكات كـ' لزج '.

   استنتاج

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