Hvordan lage et klebrig element i HTML

Denne bloggen vil diskutere CSS-posisjonsegenskapen og metoden for å lage et klebrig element i HTML.

Hva er CSS-posisjonseiendom?

CSS-posisjonsegenskapen spesifiserer posisjoneringsmetoden til HTML-elementer, som kan være en absolutt, klebrig, statistikk, fast, arvelig, relativ eller initial.

Syntaks

Syntaksen gitt ovenfor viser at posisjonsegenskapen har forskjellige verdier. De kan tildeles deretter.

La oss nå sjekke prosedyren for å lage klebrige elementer i HTML.

Hva er CSS-posisjon: klissete?

HTML-elementet med en ' klissete ”-posisjon har en relativ posisjon til den når et punkt og fungerer deretter som et klebrig element.

La oss gå gjennom det enkle eksemplet for å forstå konseptet med CSS klebrig posisjon.

Eksempel: Hvordan lage et Sticky Element i HTML?
I HTML-filen legger du til

for overskriften,

for avsnittet og

med klassenavnet ' klissete '. Deretter legger du til en

-tag som har nestet ordnet liste

med en liste
1. .

   Merk : Vi har tatt en lang liste slik at du kan observere oppførselen til det klebrige elementet når du ruller siden vår.

   HTML

   < h2 > Sticky Notes: Se effekten av Sticky Element < / h2 >
   < s > stilling: klissete < / s >
   < div klasse = 'klebrig' > Dette er min gjøremålsliste! < / div >
   < s >
   < ol >
   < at > Ring leder < / at >
   < at > Møte med ansatte < / at >
   < at > Send inn rapport < / at >
   < at > Gå til legen < / at >
   < at > Bestille en flyreise < / at >
   < at > Gå en tur. < / at >
   < at > Gå for dagligvare. < / at >
   < at > Se på TV < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < at > Litt tekst. < / at >
   < / ol >
   < / s >

   Deretter vil vi gi stil til div-en som heter sticky:

   • Her, ' .klebrig ” representerer klassen der stilegenskapene må brukes.
   • Innenfor de krøllede parentesene vil vi tildele ' stilling ' eiendomsverdi som ' klissete '.
   • « topp ' er satt som ' 0 '.
   • « bakgrunnsfarge ' er ' #00154f '.
   • Gi noen' polstring ' til div ved å sette verdien som ' 40 piksler '.
   • ' skriftstørrelse ' som ' 30 piksler '.
   • ' farge ' av fonter er satt som ' hvit '.

   CSS

   .klebrig {
   stilling : klissete ;
   topp : 0 ;
   bakgrunnsfarge : #00154f ;
   polstring : 40 piksler ;
   skriftstørrelse : 30 piksler ;
   farge : hvit ;
   }

   Lagre HTML-filen og åpne den i nettleseren for å se utdataene:

   

   Bonustips

   Ved å bruke ' hsla() ”-metoden, kan du angi en gjennomsiktig bakgrunn for det ekstra klebrige elementet som følger:

   bakgrunn - farge : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Produksjon

   

   Dette er hvordan elementet holder seg til den spesifikke posisjonen ved å sette CSS ' stilling ' eiendomsverdi som ' klissete '.

   Konklusjon

   « klissete ”-posisjon i CSS, får elementposisjonen til å veksle mellom relativ og fast. Som et resultat blir det ekstra klebrige elementet plassert i forhold til rullen til det når et visst punkt når det oppfører seg som en klebrig. Du kan også justere gjennomsiktighetsnivået til det ekstra klebrige elementet ved å bruke hsla()-metoden. Denne bloggen veiledet deg om å lage enkle og klissete gjennomsiktige elementer.