Hvordan lage et klissete element i HTML

For å forbedre det generelle utseendet til en webside, bør de ekstra elementene plasseres deretter. Spesifikt CSS “posisjon”Eiendom setter plasseringen av et element i et dokument. Plasseringen er satt av høyre, venstre, øverste og bunnegenskaper. Imidlertid er standardposisjonen til elementene statisk, der elementene ligger med den normale strømmen på siden.

Denne bloggen vil diskutere CSS Position -egenskapen og metoden for å lage et klissete element i HTML.

Hva er CSS -posisjonseiendom?

CSS Position -egenskapen spesifiserer posisjoneringsmetoden til HTML -elementer, som kan være en absolutt, klissete, statistikk, fast, arve, relativ eller initial.

Syntaks

Posisjon: Sticky | Absolutt | Statisk | Fast | Relativ | Arve | Opprinnelig

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

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

Hva er CSS -stilling: klissete?

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

La oss gå gjennom det enkle eksemplet for å forstå begrepet CSS klebrig stilling.

Eksempel: Hvordan lage et klissete element i HTML?
I HTML -filen, legg til

for overskriften,

for avsnittet, og å ha klassenavnet “klissete”. Deretter legger du til en

Tag har nestet bestilt liste

med en liste
1. .

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

   Html

   Sticky Notes: Se effekten av det klissete elementet

   
   

   Posisjon: klissete

   
   Dette er min oppgaveliste!
   

   
   

   
   
   1. Call Manager
   
   
   2. Møte med ansatte
   
   
   3. Send inn rapport
   
   
   4. Gå til legen
   
   
   5. Bestille en flyreise
   
   
   6. Gå en tur.
   
   
   7. Gå for dagligvare.
   
   
   8. Se på TV
   
   
   9. Noe tekst.
   
   
   10. Noe tekst.
   
   
   11. Noe tekst.
   
   
   12. Noe tekst.
   
   
   13. Noe tekst.
   
   
   14. Noe tekst.
   
   
   15. Noe tekst.
   
   
   16. Noe tekst.
   
   
   17. Noe tekst.
   
   
   18. Noe tekst.
   
   
   19. Noe tekst.
   
   
   20. Noe tekst.
   
   
   21. Noe tekst.
   
   
   22. Noe tekst.
   
   
   23. Noe tekst.
   
   
   24. Noe tekst.
   
   
   25. Noe tekst.
   
   
   26. Noe tekst.
   
   
   27. Noe tekst.
   
   
   28. Noe tekst.
   
   
   29. Noe tekst.
   
   
   30. Noe tekst.
   
   
   
   

   Deretter vil vi gi stil til Div som heter Sticky:

   • Her, “.klissete”Representerer klassen der stilegenskapene må brukes.
   • Inne i de krøllete parentesene vil vi tildele "posisjon”Eiendomsverdi som“klissete”.
   • “topp”Er satt som“0”.
   • “bakgrunnsfarge" er "#00154F”.
   • Gi noen “polstring”Til div ved å sette verdien som“40px”.
   • “skriftstørrelse" som "30px”.
   • “farge”Av skrifter er satt som“hvit”.

   CSS

   .klissete
   Posisjon: klissete;
   Topp: 0;
   Bakgrunnsfarge: #00154F;
   polstring: 40px;
   Font-størrelse: 30px;
   Farge: Hvit;
   

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

   Bonus tips

   Ved å bruke “hsla ()”Metode, du kan angi en gjennomsiktig bakgrunn for det ekstra klissete elementet som følger:

   Bakgrunnsfarge: HSLA (0, 100%, 90%, 0.8);

   Produksjon

   Slik holder elementet seg til den spesifikke posisjonen ved å stille CSS “posisjon”Eiendomsverdi som“klissete”.

   Konklusjon

   “klissete”Posisjon i CSS, gjør elementposisjonen til å veksle mellom relativ og fast. Som et resultat er det ekstra klissete elementet plassert i forhold til rullen til det når et visst punkt når det oppfører seg som en klissete. Du kan også justere gjennomsiktighetsnivået til det tilsatte klissete elementet ved å bruke HSLA () -metoden. Denne bloggen ledet deg om å lage enkle og klissete gjennomsiktige elementer.