Ta blog bo razpravljal o lastnosti položaja CSS in metodi za ustvarjanje lepljivega elementa v HTML.
Kaj je lastnost položaja CSS?
Lastnost položaja CSS določa metodo pozicioniranja elementov HTML, ki je lahko absolutna, lepljiva, statistična, fiksna, podedovana, relativna ali začetna.
Sintaksa
položaj : lepljivo | absolutno | statična | fiksno | relativno | podeduješ | začetnica
Zgornja sintaksa kaže, da ima lastnost položaja različne vrednosti. Temu se lahko dodelijo.
Zdaj pa si oglejmo postopek za ustvarjanje lepljivih elementov v HTML.
Kaj je položaj CSS: lepljiv?
Element HTML z ' lepljivo ” ima relativni položaj, dokler ne doseže točke, nato pa deluje kot lepljiv element.
Oglejmo si preprost primer, da razumemo koncept lepljivega položaja CSS.
Primer: Kako ustvariti lepljivi element v HTML?
V datoteko HTML dodajte
za naslov,
za odstavek in
z ugnezdenim urejenim seznamom
- s seznamom
- .
Opomba : Vzeli smo dolg seznam, tako da lahko med brskanjem po naši strani opazujete obnašanje lepljivega elementa.
HTML
< h2 > Lepljivi zapiski: glejte učinek lepljivega elementa < / h2 >
< str > položaj: lepljiv < / str >
< div razred = 'lepljivo' > To je moj seznam opravil! < / div >
< str >
< ol >
< to > Upravitelj klicev < / to >
< to > Srečanje z zaposlenimi < / to >
< to > Pošlji poročilo < / to >
< to > Pojdi k zdravniku < / to >
< to > Rezervirajte let < / to >
< to > Pojdi na sprehod. < / to >
< to > Pojdi po špecerijo. < / to >
< to > Gledati televizijo < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< to > Nekaj besedila. < / to >
< / ol >
< / str >Nato bomo dodali slog divu z imenom sticky:
- Tukaj, ' .lepljiv ” predstavlja razred, v katerem je treba uporabiti lastnosti sloga.
- Znotraj zavitih oklepajev bomo dodelili ' položaj ' vrednost nepremičnine kot ' lepljivo ”.
- ' vrh ' je nastavljeno kot ' 0 ”.
- ' Barva ozadja ' je ' #00154f ”.
- Daj nekaj ' oblazinjenje « v div, tako da nastavite njegovo vrednost kot » 40 slikovnih pik ”.
- “ velikost pisave 'kot' 30 slikovnih pik ”.
- “ barva ' pisav je nastavljeno kot ' bela ”.
CSS
.lepljiv {
položaj : lepljivo ;
vrh : 0 ;
Barva ozadja : #00154f ;
oblazinjenje : 40 slikovnih pik ;
velikost pisave : 30 slikovnih pik ;
barva : bela ;
}Shranite datoteko HTML in jo odprite v brskalniku, da vidite rezultat:
Bonus nasvet
Z uporabo ' hsla() «, lahko nastavite prosojno ozadje za dodani lepljivi element, kot sledi:
ozadje - barva : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Izhod
Tako se element drži določenega položaja z nastavitvijo CSS ' položaj ' vrednost nepremičnine kot ' lepljivo ”.
Zaključek
' lepljivo ” v CSS, preklaplja položaj elementa med relativnim in fiksnim. Posledično je dodan lepljivi element nameščen relativno glede na zvitek, dokler ne doseže določene točke, ko se obnaša kot lepljiv element. Prav tako lahko prilagodite stopnjo prosojnosti dodanega lepljivega elementa z uporabo metode hsla(). Ta blog vas je vodil pri izdelavi preprostih in lepljivih prozornih elementov.