Овај блог ће расправљати о својству ЦСС позиције и методу за креирање лепљивог елемента у ХТМЛ-у.
Шта је својство ЦСС позиције?
Својство ЦСС позиције специфицира метод позиционирања ХТМЛ елемената, који може бити апсолутни, лепљиви, статистички, фиксни, наследни, релативни или почетни.
Синтакса
положај : лепљив | апсолутна | статичне | фиксно | у односу | ти наследиш | почетни
Синтакса дата изнад показује да својство позиције има различите вредности. Они се могу доделити у складу са тим.
Сада, хајде да погледамо процедуру за креирање лепљивих елемената у ХТМЛ-у.
Шта је ЦСС позиција: лепљива?
ХТМЛ елемент са „ лепљив ” позиција има релативну позицију док не достигне тачку, а затим делује као лепљиви елемент.
Хајде да прођемо кроз једноставан пример да бисмо разумели концепт ЦСС лепљиве позиције.
Пример: Како направити лепљиви елемент у ХТМЛ-у?
У ХТМЛ датотеци додајте <х2> за наслов, <п> за пасус и <див> са именом класе “ лепљив ”. Затим додајте ознаку <п> која има угнежђену уређену листу <ол> са листом <ли>.
Белешка : Направили смо дугачку листу тако да приликом померања наше странице можете да видите понашање лепљивог елемента.
ХТМЛ
< х2 > Лепљиве белешке: Погледајте ефекат лепљивог елемента < / х2 >< стр > положај: лепљив < / стр >
< див класа = 'лепљиво' > Ово је моја листа обавеза! < / див >
< стр >
< ол >
< то > Цалл Манагер < / то >
< то > Састанак са запосленима < / то >
< то > Пошаљи извештај < / то >
< то > Идем код лекара < / то >
< то > Резервишите лет < / то >
< то > Иди у шетњу. < / то >
< то > Иди по намирнице. < / то >
< то > Гледам ТВ < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< то > Неки текст. < / то >
< / ол >
< / стр >
Затим ћемо дати стил диву под називом стицки:
- Овде, „ .лепљив ” представља класу у којој треба применити својства стила.
- Унутар витичастих заграда доделићемо „ положај ” вредност имовине као “ лепљив ”.
- „ топ ” је постављен као „ 0 ”.
- „ боја позадине ” је “ #00154ф ”.
- Дај мало ' паддинг ” на див тако што ћете поставити његову вредност као „ 40пк ”.
- “ фонт-сизе ' као ' 30пк ”.
- “ боја ” фонтова је постављено као “ бео ”.
ЦСС
.лепљив {положај : лепљив ;
топ : 0 ;
боја позадине : #00154ф ;
паддинг : 40пк ;
фонт-сизе : 30пк ;
боја : бео ;
}
Сачувајте ХТМЛ датотеку и отворите је у претраживачу да бисте видели излаз:
Бонус Тип
Коришћењем „ хсла() ” можете поставити транспарентну позадину за додати лепљиви елемент на следећи начин:
позадини - боја : хсла ( 0 , 100 %, 90 %, 0.8 ) ;Излаз
Овако се елемент држи на одређеној позицији постављањем ЦСС-а “ положај ” вредност имовине као “ лепљив ”.
Закључак
„ лепљив ” позиција у ЦСС-у, чини да се позиција елемента пребацује између релативног и фиксног. Као резултат тога, додани лепљиви елемент се поставља у односу на скрол све док не достигне одређену тачку када се понаша као лепљиви. Такође можете подесити ниво транспарентности доданог лепљивог елемента коришћењем методе хсла(). Овај блог вас је водио у прављењу једноставних и лепљивих прозирних елемената.