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
-tunniste, jossa on sisäkkäinen järjestetty luettelo
- ja luettelo
- .
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ä.