Kaip sukurti lipnų elementą HTML

Šiame tinklaraštyje bus aptariama CSS pozicijos ypatybė ir būdas sukurti lipnų elementą HTML.

Kas yra CSS pozicijos nuosavybė?

CSS pozicijos ypatybė nurodo HTML elementų padėties nustatymo metodą, kuris gali būti absoliutus, lipnus, statistinis, fiksuotas, paveldimas, santykinis arba pradinis.

Sintaksė

Aukščiau pateikta sintaksė rodo, kad pozicijos ypatybės reikšmės skiriasi. Jie gali būti atitinkamai priskirti.

Dabar pažiūrėkime, kaip sukurti lipnius elementus HTML.

Kas yra CSS pozicija: lipni?

HTML elementas su ' lipnus “ padėtis turi santykinę padėtį, kol pasiekia tašką ir tada veikia kaip lipnus elementas.

Panagrinėkime paprastą pavyzdį, kad suprastume CSS lipnios padėties sąvoką.

Pavyzdys: Kaip sukurti lipnų elementą HTML?
HTML faile pridėkite

antraštei,

pastraipai ir

su klasės pavadinimu ' lipnus “. Tada pridėkite žymą

su įdėtu išdėstytu sąrašu

su sąrašu
1. .

   Pastaba : Sudarėme ilgą sąrašą, kad slinkdami mūsų puslapį galėtumėte stebėti lipniojo elemento elgesį.

   HTML

   < h2 > Lipnūs užrašai: žiūrėkite lipniojo elemento poveikį < / h2 >
   < p > padėtis: lipni < / p >
   < div klasė = 'lipnus' > Tai yra mano darbų sąrašas! < / div >
   < p >
   < ol >
   < kad > Skambučių vadybininkas < / kad >
   < kad > Susitikimas su darbuotojais < / kad >
   < kad > Pateikti ataskaitą < / kad >
   < kad > Eik pas gydytoją < / kad >
   < kad > Užsisakyti skrydį < / kad >
   < kad > Eik pasivaikščioti. < / kad >
   < kad > Eik į bakalėjos parduotuvę. < / kad >
   < kad > Žiūrėti televizorių < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < kad > Kažkoks tekstas. < / kad >
   < / ol >
   < / p >

   Toliau suteiksime stilių div pavadinimui lipnus:

   • Čia, ' .lipnus “ reiškia klasę, kurioje turi būti taikomos stiliaus savybės.
   • Garbanotuose skliausteliuose priskirsime „ padėtis ' nuosavybės vertė kaip ' lipnus “.
   • „ viršuje “ yra nustatytas kaip “ 0 “.
   • „ fono spalva 'yra' #00154f “.
   • duok šiek tiek “ kamšalas “ į div, nustatydami jo reikšmę kaip „ 40 piks “.
   • “ šrifto dydis “ kaip „ 30 piks “.
   • “ spalva “ iš šriftų nustatytas kaip “ baltas “.

   CSS

   .lipnus {
   padėtis : lipnus ;
   viršuje : 0 ;
   fono spalva : #00154f ;
   kamšalas : 40 piks ;
   šrifto dydis : 30 piks ;
   spalva : baltas ;
   }

   Išsaugokite HTML failą ir atidarykite jį naršyklėje, kad pamatytumėte išvestį:

   

   Premijos patarimas

   Naudodami ' hsla () “ metodą, galite nustatyti skaidrų pridėto lipniojo elemento foną taip:

   fone - spalva : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Išvestis

   

   Taip elementas prilimpa prie konkrečios padėties nustatydamas CSS “ padėtis ' nuosavybės vertė kaip ' lipnus “.

   Išvada

   „ lipnus “ padėtis CSS, elemento padėtis perjungiama tarp santykinės ir fiksuotos. Dėl to pridėtas lipnus elementas yra išdėstytas slinkties atžvilgiu, kol pasiekia tam tikrą tašką, kai elgiasi kaip lipnus elementas. Taip pat galite reguliuoti pridėto lipniojo elemento skaidrumo lygį naudodami hsla() metodą. Šis tinklaraštis padėjo jums sukurti paprastus ir lipnius skaidrius elementus.