Kuidas luua kleepuvat elementi HTML-is

Selles ajaveebis käsitletakse CSS-i positsiooni atribuuti ja HTML-i kleepuva elemendi loomise meetodit.

Mis on CSS-i positsiooni atribuut?

CSS-i asukoha atribuut määrab HTML-i elementide positsioneerimismeetodi, mis võib olla absoluutne, kleepuv, statistiline, fikseeritud, pärilik, suhteline või esitäht.

Süntaks

Ülaltoodud süntaks näitab, et asukoha atribuudil on erinevad väärtused. Neid saab vastavalt määrata.

Vaatame nüüd HTML-is kleepuvate elementide loomise protseduuri.

Mis on CSS-i positsioon: kleepuv?

HTML-i element koos tähega ' kleepuv ” positsioonil on suhteline asend, kuni see jõuab punkti ja toimib seejärel kleepuva elemendina.

Vaatame läbi lihtsa näite, et mõista CSS-i kleepuva positsiooni mõistet.

Näide: kuidas luua kleepuvat elementi HTML-is?
Lisage HTML-faili päise jaoks

, lõigu jaoks

ja

klassi nimega ' kleepuv ”. Seejärel lisage märgend

, milles on pesastatud järjestatud loend

koos loendiga
1. .

   Märge : Oleme koostanud pika nimekirja, et meie lehte kerides oleks võimalik jälgida kleepuva elemendi käitumist.

   HTML

   < h2 > Kleepuvad märkmed: vaadake kleepuva elemendi mõju < / h2 >
   < lk > asend: kleepuv < / lk >
   < div klass = 'kleepuv' > See on minu ülesannete nimekiri! < / div >
   < lk >
   < ol >
   < et > Kõnehaldur < / et >
   < et > Kohtumine töötajatega < / et >
   < et > Esitage aruanne < / et >
   < et > Mine arsti juurde < / et >
   < et > Broneeri lend < / et >
   < et > Mine jalutama. < / et >
   < et > Mine toidupoodi. < / et >
   < et > Vaata telekat < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < et > Natuke teksti. < / et >
   < / ol >
   < / lk >

   Järgmisena pakume stiili div-le nimega sticky:

   • Siin, ' .kleepuv ” tähistab klassi, milles stiili atribuute tuleb rakendada.
   • Lokkis sulgudes määrame ' positsiooni ' vara väärtus kui ' kleepuv ”.
   • ' üleval ' on seatud kui ' 0 ”.
   • ' taustavärv ' on ' #00154f ”.
   • anna natuke ' polsterdus ' div, määrates selle väärtuseks ' 40 pikslit ”.
   • “ fondi suurus ” kui „ 30 pikslit ”.
   • “ värvi ' fontidest on määratud kui ' valge ”.

   CSS

   .kleepuv {
   positsiooni : kleepuv ;
   üleval : 0 ;
   taustavärv : #00154f ;
   polsterdus : 40 pikslit ;
   fondi suurus : 30 pikslit ;
   värvi : valge ;
   }

   Väljundi nägemiseks salvestage HTML-fail ja avage see brauseris:

   

   Boonusnõuanne

   Kasutades ' hsla() ” meetodil saate lisatud kleepuvale elemendile määrata läbipaistva tausta järgmiselt.

   taustal - värvi : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Väljund

   

   Nii jääb element kindlale positsioonile, määrates CSS-i ' positsiooni ' vara väärtus kui ' kleepuv ”.

   Järeldus

   ' kleepuv ” positsiooni CSS-is, paneb elemendi positsiooni suhtelise ja fikseeritud vahel lülituma. Selle tulemusena paikneb lisatud kleepuv element kerimise suhtes, kuni see jõuab teatud punktini, kui see käitub nagu kleepuv element. Samuti saate reguleerida lisatud kleepuva elemendi läbipaistvuse taset, kasutades hsla() meetodit. See ajaveeb juhendas teid lihtsate ja kleepuvate läbipaistvate elementide valmistamisel.