Как да създадете лепкав елемент в HTML

Този блог ще обсъди свойството позиция на CSS и метода за създаване на лепкав елемент в HTML.

Какво е свойство на CSS позиция?

Свойството CSS position определя метода за позициониране на HTML елементи, който може да бъде абсолютен, лепкав, статистически, фиксиран, наследен, относителен или начален.

Синтаксис

Синтаксисът, даден по-горе, показва, че свойството позиция има различни стойности. Те могат да бъдат съответно назначени.

Сега нека проверим процедурата за създаване на лепкави елементи в HTML.

Какво е CSS позиция: лепкава?

HTML елементът с „ лепкава ” позиция има относителна позиция, докато достигне точка и след това действа като лепкав елемент.

Нека преминем през простия пример, за да разберем концепцията за CSS лепкава позиция.

Пример: Как да създадете лепкав елемент в HTML?
В HTML файла добавете

за заглавието,

за абзаца и

с име на клас “ лепкава ”. След това добавете таг

с вложен подреден списък

със списък
1. .

   Забележка : Взехме дълъг списък, така че при превъртане на нашата страница да можете да наблюдавате поведението на залепващия елемент.

   HTML

   < h2 > Лепящи бележки: Вижте ефекта на лепкавия елемент < / h2 >
   < стр > позиция: лепкава < / стр >
   < див клас = 'лепкав' > Това е моят списък със задачи! < / див >
   < стр >
   < ол >
   < че > Мениджър на обаждания < / че >
   < че > Среща със служители < / че >
   < че > Изпратете отчет < / че >
   < че > Отиди на лекар < / че >
   < че > Резервирай Полет < / че >
   < че > Отидете на разходка. < / че >
   < че > Отидете за хранителни стоки. < / че >
   < че > Гледам телевизия < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < че > Малко текст. < / че >
   < / ол >
   < / стр >

   След това ще предоставим стил на div с име sticky:

   • Тук, ' .лепкав ” представлява класа, в който трябва да се приложат свойствата на стила.
   • Вътре във фигурните скоби ще присвоим „ позиция „стойност на имота като“ лепкава ”.
   • „ Горна част ” е зададено като „ 0 ”.
   • „ Цвят на фона 'е' #00154f ”.
   • Дай малко“ подплата ” към div, като зададете стойността му като „ 40px ”.
   • “ размер на шрифта ' като ' 30px ”.
   • “ цвят ” от шрифтове е зададено като „ бяло ”.

   CSS

   .лепкав {
   позиция : лепкава ;
   Горна част : 0 ;
   Цвят на фона : #00154f ;
   подплата : 40px ;
   размер на шрифта : 30px ;
   цвят : бяло ;
   }

   Запазете HTML файла и го отворете в браузъра, за да видите резултата:

   

   Бонус съвет

   Чрез използването на „ hsla() ”, можете да зададете прозрачен фон за добавения лепкав елемент, както следва:

   заден план - цвят : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Изход

   

   Ето как елементът се придържа към конкретната позиция чрез настройка на CSS ' позиция „стойност на имота като“ лепкава ”.

   Заключение

   „ лепкава ” в CSS, кара позицията на елемента да превключва между относителна и фиксирана. В резултат на това добавеният лепкав елемент се позиционира спрямо свитъка, докато достигне определена точка, когато се държи като лепкав. Можете също така да регулирате нивото на прозрачност на добавения лепкав елемент, като използвате метода hsla(). Този блог ви напътства как да направите прости и лепкави прозрачни елементи.