Tatalakayin ng blog na ito ang pag-aari ng posisyon ng CSS at ang paraan upang lumikha ng malagkit na elemento sa HTML.
Ano ang CSS position Property?
Tinutukoy ng CSS position property ang paraan ng pagpoposisyon ng mga elemento ng HTML, na maaaring maging ganap, malagkit, istatistika, fixed, inherit, kamag-anak, o inisyal.
Syntax
posisyon : malagkit | ganap | static | nakapirming | kamag-anak | magmana ka | inisyal
Ang syntax na ibinigay sa itaas ay nagpapakita na ang katangian ng posisyon ay may iba't ibang mga halaga. Maaari silang italaga nang naaayon.
Ngayon, tingnan natin ang pamamaraan upang lumikha ng mga malagkit na elemento sa HTML.
Ano ang posisyon ng CSS: sticky?
Ang HTML na elemento na may ' malagkit ” Ang posisyon ay may kamag-anak na posisyon hanggang sa umabot ito sa isang punto at pagkatapos ay kumikilos na parang malagkit na elemento.
Dumaan tayo sa simpleng halimbawa upang maunawaan ang konsepto ng CSS sticky position.
Halimbawa: Paano Gumawa ng Malagkit na Elemento sa HTML?
Sa HTML file, idagdag ang
para sa heading,
para sa talata, at
tag na may naka-nest na ordered list
- na may listahan na
- .
Tandaan : Kumuha kami ng mahabang listahan upang sa pag-scroll sa aming pahina, maobserbahan mo ang pag-uugali ng malagkit na elemento.
HTML
< h2 > Malagkit na Tala: Tingnan ang Epekto ng Malagkit na Elemento < / h2 >
< p > posisyon: malagkit < / p >
< div klase = 'malagkit' > Ito ang aking To-Do List! < / div >
< p >
< ol >
< na > Tawagan ang Manager < / na >
< na > Pagpupulong sa mga Empleyado < / na >
< na > Isumite ang Ulat < / na >
< na > Pumunta sa Doctor < / na >
< na > Mag-book ng flight < / na >
< na > Maglakad ka. < / na >
< na > Mag-grocery ka. < / na >
< na > Manood ng TV < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< na > Ilang text. < / na >
< / ol >
< / p >Susunod, magbibigay kami ng istilo sa div na pinangalanang sticky:
- Dito,' .malagkit ” ay kumakatawan sa klase kung saan kailangang ilapat ang mga katangian ng istilo.
- Sa loob ng mga kulot na bracket, itatalaga namin ang ' posisyon 'halaga ng ari-arian bilang ' malagkit ”.
- Ang ' itaas ' ay nakatakda bilang ' 0 ”.
- Ang ' kulay ng background 'ay' #00154f ”.
- Bigyan ng ilang' padding ” sa div sa pamamagitan ng pagtatakda ng halaga nito bilang “ 40px ”.
- “ laki ng font 'bilang' 30px ”.
- “ kulay ' ng mga font ay nakatakda bilang ' puti ”.
CSS
.malagkit {
posisyon : malagkit ;
itaas : 0 ;
kulay ng background : #00154f ;
padding : 40px ;
laki ng font : 30px ;
kulay : puti ;
}I-save ang HTML file at buksan ito sa browser upang makita ang output:
Tip sa Bonus
Sa pamamagitan ng paggamit ng ' hsla() ”, maaari kang magtakda ng isang transparent na background para sa idinagdag na malagkit na elemento tulad ng sumusunod:
background - kulay : hsla ( 0 , 100 %, 90 %, 0.8 ) ;Output
Ito ay kung paano dumikit ang elemento sa partikular na posisyon sa pamamagitan ng pagtatakda ng CSS ' posisyon 'halaga ng ari-arian bilang ' malagkit ”.
Konklusyon
Ang ' malagkit ” na posisyon sa CSS, ginagawang magpalipat-lipat ang posisyon ng elemento sa pagitan ng kamag-anak at naayos. Bilang resulta, ang idinagdag na malagkit na elemento ay nakaposisyon kaugnay ng scroll hanggang sa umabot ito sa isang tiyak na punto kung kailan ito kumikilos na parang malagkit. Maaari mo ring isaayos ang antas ng transparency ng idinagdag na malagkit na elemento sa pamamagitan ng paggamit ng hsla() na paraan. Ginabayan ka ng blog na ito tungkol sa paggawa ng simple at malagkit na transparent na mga elemento.