Jak utworzyć lepki element w HTML

W tym blogu omówimy właściwość pozycji CSS i metodę tworzenia elementu lepkiego w HTML.

Co to jest właściwość pozycji CSS?

Właściwość pozycji CSS określa metodę pozycjonowania elementów HTML, która może być bezwzględna, lepka, statystyczna, stała, dziedziczona, względna lub początkowa.

Składnia

Podana powyżej składnia pokazuje, że właściwość position ma różne wartości. Można je odpowiednio przypisać.

Teraz przyjrzyjmy się procedurze tworzenia lepkich elementów w HTML.

Co to jest pozycja CSS: lepka?

Element HTML z „ lepki ” pozycja ma pozycję względną, dopóki nie osiągnie punktu, a następnie zachowuje się jak element lepki.

Przejdźmy przez prosty przykład, aby zrozumieć koncepcję lepkiej pozycji CSS.

Przykład: Jak utworzyć element przyklejony w HTML?
W pliku HTML dodaj

dla nagłówka,

dla akapitu i

o nazwie klasy „ lepki ”. Następnie dodaj tag

z zagnieżdżoną uporządkowaną listą

z listą
1. .

   Notatka : Sporządziliśmy długą listę, aby podczas przewijania naszej strony można było obserwować zachowanie przyklejonego elementu.

   HTML

   < h2 > Karteczki samoprzylepne: Zobacz efekt elementu samoprzylepnego < / h2 >
   < p > pozycja: lepka < / p >
   < dz klasa = 'lepki' > To jest moja lista rzeczy do zrobienia! < / dz >
   < p >
   < ol >
   < że > Menedżer połączeń < / że >
   < że > Spotkanie z pracownikami < / że >
   < że > Złożyć raport < / że >
   < że > Idź do lekarza < / że >
   < że > Zarezerwuj lot < / że >
   < że > Iść na spacer. < / że >
   < że > Idź na spożywczy. < / że >
   < że > Oglądać telewizję < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < że > Jakiś tekst. < / że >
   < / ol >
   < / p >

   Następnie nadamy styl divowi o nazwie sticky:

   • Tutaj, ' .lepki ” reprezentuje klasę, w której należy zastosować właściwości stylu.
   • W nawiasach klamrowych przypiszemy „ pozycja „wartość nieruchomości jako” lepki ”.
   • „ Top ” jest ustawione jako „ 0 ”.
   • „ kolor tła ' jest ' #00154f ”.
   • Daj trochę ' wyściółka ” do elementu div, ustawiając jego wartość jako „ 40px ”.
   • “ rozmiar czcionki ' jak ' 30px ”.
   • “ kolor ” czcionek jest ustawiony jako „ biały ”.

   CSS

   .lepki {
   pozycja : lepki ;
   Top : 0 ;
   kolor tła : #00154f ;
   wyściółka : 40px ;
   rozmiar czcionki : 30px ;
   kolor : biały ;
   }

   Zapisz plik HTML i otwórz go w przeglądarce, aby zobaczyć wynik:

   

   Bonusowa wskazówka

   Korzystając z „ hsla() ”, możesz ustawić przezroczyste tło dla dodanego lepkiego elementu w następujący sposób:

   tło - kolor : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Wyjście

   

   W ten sposób element przykleja się do określonej pozycji, ustawiając CSS „ pozycja „wartość nieruchomości jako” lepki ”.

   Wniosek

   „ lepki ” position w CSS powoduje przełączanie pozycji elementu między względną a stałą. W rezultacie dodany element lepki jest ustawiany względem zwoju, aż osiągnie pewien punkt, w którym zachowuje się jak lepki. Możesz także dostosować poziom przezroczystości dodawanego lepkiego elementu, używając metody hsla(). Ten blog podpowiadał, jak tworzyć proste i lepkie przezroczyste elementy.