Cum se creează un element lipicios în HTML

Acest blog va discuta despre proprietatea poziției CSS și metoda de a crea un element sticky în HTML.

Ce este proprietatea poziției CSS?

Proprietatea de poziție CSS specifică metoda de poziționare a elementelor HTML, care poate fi absolută, lipicioasă, statistică, fixă, moștenire, relativă sau inițială.

Sintaxă

Sintaxa prezentată mai sus arată că proprietatea poziție are valori diferite. Ele pot fi alocate în consecință.

Acum, să verificăm procedura de creare a elementelor lipicioase în HTML.

Ce este poziția CSS: sticky?

Elementul HTML cu un „ lipicios ” poziția are o poziție relativă până când ajunge la un punct și apoi acționează ca un element lipicios.

Să trecem prin exemplul simplu pentru a înțelege conceptul de poziție lipicioasă CSS.

Exemplu: Cum se creează un element lipicios în HTML?
În fișierul HTML, adăugați

pentru antet,

pentru paragraf și

având numele clasei „ lipicios ”. Apoi, adăugați o etichetă

având o listă ordonată imbricată

cu o listă
1. .

   Notă : Am luat o listă lungă, astfel încât, la derularea paginii noastre, să puteți observa comportamentul elementului lipicios.

   HTML

   < h2 > Note lipicioase: vezi efectul elementului lipicios < / h2 >
   < p > poziție: lipicioasă < / p >
   < div clasă = 'lipicios' > Aceasta este lista mea de lucruri de făcut! < / div >
   < p >
   < ol >
   < acea > Manager de apeluri < / acea >
   < acea > Întâlnire cu angajații < / acea >
   < acea > Trimiteți raportul < / acea >
   < acea > Du-te la doctor < / acea >
   < acea > Rezervă un zbor < / acea >
   < acea > Mergi la plimbare. < / acea >
   < acea > Du-te la băcănie. < / acea >
   < acea > Uită la TV < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < acea > Un text. < / acea >
   < / ol >
   < / p >

   În continuare, vom oferi stil div-ului numit sticky:

   • Aici, ' .lipicios ” reprezintă clasa în care trebuie aplicate proprietățile stilului.
   • În interiorul parantezelor, vom atribui „ poziţie „valoarea proprietății ca „ lipicios ”.
   • „ top ” este setat ca „ 0 ”.
   • „ culoare de fundal ' este ' #00154f ”.
   • Da ceva ' căptușeală ” la div setându-i valoarea ca „ 40px ”.
   • „ marimea fontului ' la fel de ' 30px ”.
   • „ culoare ” de fonturi este setat ca “ alb ”.

   CSS

   .lipicios {
   poziţie : lipicios ;
   top : 0 ;
   culoare de fundal : #00154f ;
   căptușeală : 40px ;
   marimea fontului : 30px ;
   culoare : alb ;
   }

   Salvați fișierul HTML și deschideți-l în browser pentru a vedea rezultatul:

   

   Sfat bonus

   Prin utilizarea „ hsla() ”, puteți seta un fundal transparent pentru elementul lipicios adăugat, după cum urmează:

   fundal - culoare : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Ieșire

   

   Acesta este modul în care elementul se lipește la poziția specifică setând CSS „ poziţie „valoarea proprietății ca „ lipicios ”.

   Concluzie

   „ lipicios ” poziția în CSS, face ca poziția elementului să comute între relativ și fix. Ca urmare, elementul lipicios adăugat este poziționat în raport cu scroll până când ajunge la un anumit punct când se comportă ca un lipicios. De asemenea, puteți ajusta nivelul de transparență al elementului lipicios adăugat utilizând metoda hsla(). Acest blog v-a ghidat despre crearea unor elemente transparente simple și lipicioase.