Tento blog bude diskutovať o vlastnosti CSS position a metóde na vytvorenie sticky elementu v HTML.
Čo je vlastnosť pozície CSS?
Vlastnosť CSS position určuje metódu umiestnenia prvkov HTML, ktorá môže byť absolútna, priliehavá, štatistická, pevná, zdedená, relatívna alebo iniciálna.
Syntax
pozíciu : lepkavý | absolútne | statické | pevné | príbuzný | dedíš | počiatočné
Syntax uvedená vyššie ukazuje, že vlastnosť position má rôzne hodnoty. Podľa toho ich možno priradiť.
Teraz sa pozrime na postup vytvárania lepivých prvkov v HTML.
Čo je pozícia CSS: lepkavá?
Prvok HTML so znakom „ lepkavý ” poloha má relatívnu polohu, kým nedosiahne bod a potom pôsobí ako priľnavý prvok.
Poďme si prejsť jednoduchým príkladom, aby sme pochopili koncept lepiacej pozície CSS.
Príklad: Ako vytvoriť Sticky Element v HTML?
Do súboru HTML pridajte
pre nadpis,
pre odsek a
s vnoreným usporiadaným zoznamom
- so zoznamom
- .
Poznámka : Zobrali sme dlhý zoznam, aby ste pri posúvaní našej stránky mohli sledovať správanie sa lepiaceho prvku.
HTML
< h2 > Lepiace bločky: Pozrite si účinok lepkavého prvku < / h2 >
< p > pozícia: lepkavá < / p >
< div trieda = 'lepkavý' > Toto je môj zoznam úloh! < / div >
< p >
< ol >
< že > Správca hovorov < / že >
< že > Stretnutie so zamestnancami < / že >
< že > Odoslať správu < / že >
< že > Choď k doktorovi < / že >
< že > Rezervovať let < / že >
< že > Choďte na prechádzku. < / že >
< že > Choďte do potravín. < / že >
< že > Pozerať TV < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< že > Nejaký text. < / že >
< / ol >
< / p >Ďalej poskytneme štýl divu s názvom sticky:
- Tu, ' .lepkavý ” predstavuje triedu, v ktorej je potrebné použiť vlastnosti štýlu.
- Vo vnútri zložených zátvoriek priradíme „ pozíciu “hodnota nehnuteľnosti ako “ lepkavý “.
- ' top “ je nastavený ako “ 0 “.
- ' farba pozadia ' je ' #00154f “.
- Daj nejaké“ vypchávka ” na div nastavením jeho hodnoty ako “ 40 pixelov “.
- “ veľkosť písma “ ako “ 30 pixelov “.
- “ farba “písm je nastavený ako “ biely “.
CSS
.lepkavý {
pozíciu : lepkavý ;
top : 0 ;
farba pozadia : #00154f ;
vypchávka : 40 pixelov ;
veľkosť písma : 30 pixelov ;
farba : biely ;
}Uložte súbor HTML a otvorte ho v prehliadači, aby ste videli výstup:
Bonusový tip
Pomocou „ hsla() “, môžete nastaviť priehľadné pozadie pre pridaný lepkavý prvok takto:
pozadie - farba : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Výkon
Takto sa prvok prilepí na konkrétnu pozíciu nastavením CSS “ pozíciu “hodnota nehnuteľnosti ako “ lepkavý “.
Záver
' lepkavý ” v CSS, umožňuje prepínanie pozície prvku medzi relatívnou a pevnou. Výsledkom je, že pridaný lepivý prvok je umiestnený vzhľadom na zvitok, až kým nedosiahne určitý bod, kedy sa správa ako lepkavý. Úroveň priehľadnosti pridaného lepivého prvku môžete upraviť aj použitím metódy hsla(). Tento blog vás previedol tvorbou jednoduchých a lepkavých priehľadných prvkov.