Kako stvoriti ljepljivi element u HTML-u

Ovaj će blog raspravljati o svojstvu položaja CSS-a i metodi stvaranja ljepljivog elementa u HTML-u.

Što je svojstvo CSS pozicije?

CSS svojstvo pozicije navodi metodu pozicioniranja HTML elemenata, koja može biti apsolutna, ljepljiva, statistička, fiksna, naslijeđena, relativna ili početna.

Sintaksa

Gore navedena sintaksa pokazuje da svojstvo pozicije ima različite vrijednosti. Mogu se prema tome dodijeliti.

Sada provjerimo postupak za stvaranje ljepljivih elemenata u HTML-u.

Što je CSS pozicija: ljepljiva?

HTML element sa ' ljepljiv ” pozicija ima relativnu poziciju dok ne dosegne točku, a zatim se ponaša kao ljepljivi element.

Prođimo kroz jednostavan primjer da bismo razumjeli koncept CSS ljepljive pozicije.

Primjer: Kako stvoriti ljepljivi element u HTML-u?
U HTML datoteku dodajte

za naslov,

za odlomak i

koji ima naziv klase “ ljepljiv ”. Zatim dodajte oznaku

s ugniježđenim uređenim popisom

s popisom
1. .

   Bilješka : Uzeli smo dugačak popis tako da dok listate našom stranicom možete promatrati ponašanje ljepljivog elementa.

   HTML

   < h2 > Ljepljive bilješke: pogledajte učinak ljepljivog elementa < / h2 >
   < str > položaj: ljepljiv < / str >
   < div razreda = 'ljepljiv' > Ovo je moj popis obveza! < / div >
   < str >
   < ol >
   < da > Upravitelj poziva < / da >
   < da > Sastanak sa zaposlenicima < / da >
   < da > Pošalji izvješće < / da >
   < da > Idi doktoru < / da >
   < da > Rezervirati let < / da >
   < da > Idi u šetnju. < / da >
   < da > Idi po namirnice. < / da >
   < da > Gledati TV < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < da > Neki tekst. < / da >
   < / ol >
   < / str >

   Zatim ćemo dodati stil divu pod nazivom sticky:

   • Ovdje, ' .ljepljiv ” predstavlja klasu u kojoj je potrebno primijeniti svojstva stila.
   • Unutar vitičastih zagrada dodijelit ćemo ' položaj ' vrijednost imovine kao ' ljepljiv ”.
   • ' vrh ' postavljeno je kao ' 0 ”.
   • ' boja pozadine ” je “ #00154f ”.
   • Daj malo' podstava ” na div postavljanjem njegove vrijednosti kao “ 40 px ”.
   • “ veličina fonta ” kao “ 30 px ”.
   • “ boja ” fontova postavljeno je kao “ bijela ”.

   CSS

   .ljepljiv {
   položaj : ljepljiv ;
   vrh : 0 ;
   boja pozadine : #00154f ;
   podstava : 40 px ;
   veličina fonta : 30 px ;
   boja : bijela ;
   }

   Spremite HTML datoteku i otvorite je u pregledniku da biste vidjeli izlaz:

   

   Bonus savjet

   Korištenjem ' hsla() ”, možete postaviti prozirnu pozadinu za dodani ljepljivi element na sljedeći način:

   pozadina - boja : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Izlaz

   

   Ovako se element lijepi na određenu poziciju postavljanjem CSS-a ' položaj ' vrijednost imovine kao ' ljepljiv ”.

   Zaključak

   ' ljepljiv ” u CSS-u, mijenja položaj elementa između relativnog i fiksnog. Kao rezultat toga, dodani ljepljivi element postavljen je u odnosu na svitak sve dok ne dosegne određenu točku kada se ponaša kao ljepljivi element. Također možete podesiti razinu prozirnosti dodanog ljepljivog elementa korištenjem metode hsla(). Ovaj blog vas je vodio o izradi jednostavnih i ljepljivih prozirnih elemenata.