Kā izveidot lipīgu elementu HTML

Šajā emuārā tiks apspriests CSS pozīcijas rekvizīts un metode, kā izveidot lipīgu elementu HTML.

Kas ir CSS pozīcijas īpašums?

CSS pozīcijas rekvizīts norāda HTML elementu pozicionēšanas metodi, kas var būt absolūts, lipīgs, statistisks, fiksēts, mantots, relatīvs vai iniciāls.

Sintakse

Iepriekš norādītā sintakse parāda, ka pozīcijas rekvizītam ir dažādas vērtības. Tos var attiecīgi piešķirt.

Tagad apskatīsim procedūru, kā izveidot lipīgus elementus HTML.

Kas ir CSS pozīcija: lipīga?

HTML elements ar ' lipīga ” pozīcijai ir relatīva pozīcija, līdz tā sasniedz punktu un pēc tam darbojas kā lipīgs elements.

Apskatīsim vienkāršu piemēru, lai saprastu CSS lipīgās pozīcijas jēdzienu.

Piemērs: Kā izveidot lipīgu elementu HTML?
HTML failā pievienojiet

virsrakstam,

rindkopai un

ar klases nosaukumu ' lipīga ”. Pēc tam pievienojiet tagu

ar ligzdotu sakārtotu sarakstu

ar sarakstu
1. .

   Piezīme : Mēs esam izveidojuši garu sarakstu, lai, ritinot mūsu lapu, jūs varētu novērot lipīgā elementa uzvedību.

   HTML

   < h2 > Līmlapiņas: skatiet Līmējošā elementa efektu < / h2 >
   < lpp > pozīcija: lipīga < / lpp >
   < div klasē = 'lipīgs' > Šis ir mans uzdevumu saraksts! < / div >
   < lpp >
   < ol >
   < ka > Zvanu pārvaldnieks < / ka >
   < ka > Tikšanās ar darbiniekiem < / ka >
   < ka > Iesniegt ziņojumu < / ka >
   < ka > Ej pie ārsta < / ka >
   < ka > Rezervējiet lidojumu < / ka >
   < ka > Iet pastaigāties. < / ka >
   < ka > Iet uz pārtikas preču veikalu. < / ka >
   < ka > Skatīties televīzoru < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < ka > Kaut kāds teksts. < / ka >
   < / ol >
   < / lpp >

   Tālāk mēs nodrošināsim stilu div ar nosaukumu sticky:

   • Šeit, ' .lipīgs ” apzīmē klasi, kurā jāpielieto stila rekvizīti.
   • Cirtainajās iekavās mēs piešķirsim “ pozīciju 'īpašuma vērtība kā ' lipīga ”.
   • ' tops ' ir iestatīts kā ' 0 ”.
   • ' fona krāsa 'ir' #00154f ”.
   • iedod kādu ' polsterējums ' uz div, iestatot tā vērtību kā ' 40 pikseļi ”.
   • ' fonta izmērs 'kā' 30 pikseļi ”.
   • ' krāsa no fontiem ir iestatīts kā “ balts ”.

   CSS

   .lipīgs {
   pozīciju : lipīga ;
   tops : 0 ;
   fona krāsa : #00154f ;
   polsterējums : 40 pikseļi ;
   fonta izmērs : 30 pikseļi ;
   krāsa : balts ;
   }

   Saglabājiet HTML failu un atveriet to pārlūkprogrammā, lai redzētu izvadi:

   

   Bonusa padoms

   Izmantojot ' hsla() ” metodi, pievienotajam lipīgajam elementam varat iestatīt caurspīdīgu fonu šādi:

   fons - krāsa : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Izvade

   

   Tādā veidā elements pielīp konkrētajai pozīcijai, iestatot CSS ' pozīciju 'īpašuma vērtība kā ' lipīga ”.

   Secinājums

   ' lipīga ” pozīcija CSS, liek elementa pozīcijai pārslēgties starp relatīvo un fiksēto. Rezultātā pievienotais lipīgais elements tiek novietots attiecībā pret ritināšanu, līdz tas sasniedz noteiktu punktu, kad tas darbojas kā lipīgs elements. Varat arī pielāgot pievienotā lipīgā elementa caurspīdīguma līmeni, izmantojot hsla () metodi. Šis emuārs palīdzēja jums izveidot vienkāršus un lipīgus caurspīdīgus elementus.