Sticky Elementin luominen HTML:ssä

Sticky Elementin Luominen Html Ssa



Verkkosivun yleisilmeen parantamiseksi lisätyt elementit tulee sijoittaa vastaavasti. Erityisesti CSS ' asema ”-ominaisuus määrittää elementin sijainnin dokumentissa. Sijainti määritetään oikealla, vasemmalla, ylä- ja alapuolella olevilla ominaisuuksilla. Elementtien oletussijainti on kuitenkin staattinen, jossa elementit sijaitsevat sivun normaalin kulun mukana.

Tässä blogissa käsitellään CSS-sijaintiominaisuutta ja tapaa luoda tahmea elementti HTML:ään.

Mikä on CSS-sijaintiominaisuus?

CSS-sijaintiominaisuus määrittää HTML-elementtien paikannusmenetelmän, joka voi olla absoluuttinen, tahmea, tilastollinen, kiinteä, periytyvä, suhteellinen tai alkukirjain.







Syntaksi



asema : tahmea | ehdoton | staattinen | korjattu | suhteellinen | inherit | alkukirjain

Yllä oleva syntaksi osoittaa, että sijainti-ominaisuudella on eri arvot. Ne voidaan määrittää vastaavasti.



Tarkastellaan nyt prosessia tahmeiden elementtien luomiseksi HTML:ään.





Mikä on CSS-sijainti: tahmea?

HTML-elementti, jossa on ' tahmea ” -asemalla on suhteellinen sijainti, kunnes se saavuttaa pisteen ja toimii sitten tahmeana elementtinä.

Käydään läpi yksinkertainen esimerkki ymmärtääksesi CSS-kiinnityspaikan käsite.



Esimerkki: Kuinka luoda tarttuva elementti HTML:ssä?
Lisää HTML-tiedostoon

otsikoksi,

kappaleeksi ja

, jonka luokan nimi on ' tahmea ”. Lisää sitten

-tunniste, jossa on sisäkkäinen järjestetty luettelo

    ja luettelo
  1. .

    Merkintä : Olemme ottaneet pitkän listan, jotta sivuamme selaamalla voit tarkkailla tahmea elementin käyttäytymistä.

    HTML

    < h2 > Muistiinpanot: Katso Tarraelementin vaikutus < / h2 >
    < s > asento: tahmea < / s >
    < div luokkaa = 'tahmea' > Tämä on tehtävälistani! < / div >
    < s >
    < ol >
    < että > Puhelunhallinta < / että >
    < että > Tapaaminen työntekijöiden kanssa < / että >
    < että > Lähetä raportti < / että >
    < että > Mene lääkäriin < / että >
    < että > Varaa lento < / että >
    < että > Mene kävelylle. < / että >
    < että > Mene ruokakauppaan. < / että >
    < että > Katso TV: tä < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < että > Jotain tekstiä. < / että >
    < / ol >
    < / s >

    Seuraavaksi tarjoamme tyylin sticky-nimiselle divlle:

    • Täällä, ' .tahmea ” edustaa luokkaa, jossa tyyliominaisuuksia on käytettävä.
    • Kiharasuluissa määritämme ' asema ' omaisuuden arvo ' tahmea ”.
    • ' alkuun ' on asetettu ' 0 ”.
    • ' taustaväri ' On ' #00154f ”.
    • anna vähän ' pehmuste ' div:ään asettamalla sen arvoksi ' 40 pikseliä ”.
    • ' Fonttikoko ' kuten ' 30 kuvapistettä ”.
    • ' väri- ' kirjasimista on asetettu ' valkoinen ”.

    CSS

    .tahmea {
    asema : tahmea ;
    alkuun : 0 ;
    taustaväri : #00154f ;
    pehmuste : 40 pikseliä ;
    Fonttikoko : 30 kuvapistettä ;
    väri- : valkoinen ;
    }

    Tallenna HTML-tiedosto ja avaa se selaimessa nähdäksesi tulosteen:

    Bonusvinkki

    Käyttämällä ' hsla() ” -menetelmällä voit asettaa lisätylle tahmealle elementille läpinäkyvän taustan seuraavasti:

    tausta - väri- : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

    Lähtö

    Näin elementti pysyy tiettyyn paikkaan asettamalla CSS ' asema ' omaisuuden arvo ' tahmea ”.

    Johtopäätös

    ' tahmea ” asema CSS:ssä, saa elementin sijainnin vaihtamaan suhteellisen ja kiinteän välillä. Tämän seurauksena lisätty tahmea elementti sijoittuu suhteessa rullaan, kunnes se saavuttaa tietyn pisteen, kun se käyttäytyy tahmeana. Voit myös säätää lisätyn tahmean elementin läpinäkyvyystasoa käyttämällä hsla()-menetelmää. Tämä blogi opasti sinua tekemään yksinkertaisia ​​ja tahmeita läpinäkyviä elementtejä.