Ez a blog a CSS pozíció tulajdonságát és a ragadós elem létrehozásának módszerét tárgyalja a HTML-ben.
Mi az a CSS pozíció tulajdonság?
A CSS-pozíció tulajdonság a HTML-elemek pozicionálási módszerét határozza meg, amely lehet abszolút, ragadós, statisztikai, rögzített, öröklődő, relatív vagy kezdőbetű.
Szintaxis
pozíció : ragadós | abszolút | statikus | rögzített | relatív | örökölsz | a kezdeti
A fent megadott szintaxis azt mutatja, hogy a pozíció tulajdonság eltérő értékekkel rendelkezik. Ennek megfelelően hozzárendelhetők.
Most nézzük meg a ragadós elemek létrehozásának eljárását HTML-ben.
Mi az a CSS pozíció: ragadós?
A HTML elem egy „ ragadós ” pozíciónak relatív pozíciója van, amíg el nem ér egy pontot, majd ragadós elemként működik.
Nézzük meg az egyszerű példát, hogy megértsük a CSS ragadós pozíció fogalmát.
Példa: Hogyan készítsünk ragadós elemet HTML-ben?
A HTML-fájlban adja hozzá a
-t a fejléchez, a
-t a bekezdéshez, és a
címkét, amely beágyazott rendezett
- listát tartalmaz egy
- listával.
jegyzet : Hosszú listát állítottunk össze, hogy oldalunkat görgetve megfigyelhesd a ragadós elem viselkedését.
HTML
< h2 > Ragadós jegyzetek: Lásd a Ragadós elem hatását < / h2 >
< p > pozíció: ragadós < / p >
< div osztály = 'ragadós' > Ez az én feladatlistám! < / div >
< p >
< ol >
< hogy > Híváskezelő < / hogy >
< hogy > Találkozó az alkalmazottakkal < / hogy >
< hogy > Jelentés benyújtása < / hogy >
< hogy > Menni az orvoshoz < / hogy >
< hogy > Járat foglalása < / hogy >
< hogy > Elmenni sétálni. < / hogy >
< hogy > Menj el bevásárolni. < / hogy >
< hogy > TV-t néz < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< hogy > Némi szöveg. < / hogy >
< / ol >
< / p >Ezután stílust adunk a sticky nevű divnek:
- Itt, ' .ragadós ” azt az osztályt jelöli, amelyben a stílustulajdonságokat alkalmazni kell.
- A göndör zárójelben hozzárendeljük a „ pozíció ' ingatlan értéke mint ' ragadós ”.
- Az ' tetejére ' a következőre van állítva: ' 0 ”.
- Az ' háttérszín ' az ' #00154f ”.
- adj egy kis ' párnázás ' a div-hez úgy, hogy az értékét '' 40 képpont ”.
- ' betűméret ' mint ' 30 képpont ”.
- ' szín A betűtípusok '' értéke ' fehér ”.
CSS
.ragadós {
pozíció : ragadós ;
tetejére : 0 ;
háttérszín : #00154f ;
párnázás : 40 képpont ;
betűméret : 30 képpont ;
szín : fehér ;
}Mentse a HTML-fájlt, és nyissa meg a böngészőben a kimenet megtekintéséhez:
Bónusz tipp
A „ hsla() ” módszerrel átlátszó hátteret állíthat be a hozzáadott ragadós elemhez az alábbiak szerint:
háttér - szín : hsla ( 0 , 100 %, 90 %, 0.8 ) ;Kimenet
Így tapad az elem az adott pozícióhoz a CSS beállításával pozíció ' ingatlan értéke mint ' ragadós ”.
Következtetés
Az ' ragadós ” pozíciót a CSS-ben, az elem pozícióját relatív és rögzített között váltja. Ennek eredményeként a hozzáadott ragadós elem a tekercshez képest addig helyezkedik el, amíg el nem ér egy bizonyos pontot, amikor ragadósan viselkedik. A hozzáadott ragadós elem átlátszósági szintjét a hsla() metódussal is beállíthatja. Ez a blog elvezetett az egyszerű és ragadós átlátszó elemek elkészítéséhez.