Jak utworzyć lepki element w HTML

Aby zwiększyć ogólny wygląd strony internetowej, dodane elementy powinny być odpowiednio ustawione. W szczególności CSS „pozycja”Właściwość ustawia pozycjonowanie elementu w dokumencie. Lokalizacja jest ustawiona przez właściwości prawe, lewe, górne i dolne. Jednak domyślna pozycja elementów jest statyczna, w której elementy znajdują się w normalnym przepływie strony.

Ten blog omówi właściwość pozycji CSS i metodę utworzenia lepkiego elementu 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ędnym, lepkim, statystycznym, ustalonym, dziedzicznym, względnym lub początkowym.

Składnia

Pozycja: Sticky | Absolute | statyczny | stały | względny | Dziedziczy | Początkowy

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

Teraz sprawdźmy procedurę tworzenia lepkich elementów w HTML.

Co to jest pozycja CSS: Sticky?

Element HTML z „lepki”Pozycja ma względną pozycję, aż osiągnie punkt, a następnie działa jak lepki element.

Przejdźmy do prostego przykładu, aby zrozumieć pojęcie lepkiej pozycji CSS.

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

na nagłówek,

do akapitu i posiadanie nazwy klasy „lepki". Następnie dodaj

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

z listą
1. .

   Notatka: Zrobiliśmy długą listę, aby po przewijaniu naszej strony można było obserwować zachowanie lepkiego elementu.

   Html

   Notatki lepkie: Zobacz efekt lepkiego elementu

   
   

   Pozycja: Sticky

   
   To jest moja lista rzeczy do zrobienia!
   

   
   

   
   
   1. Menedżer połączeń
   
   
   2. Spotkanie z pracownikami
   
   
   3. Złożyć raport
   
   
   4. Idź do lekarza
   
   
   5. Zarezerwować lot
   
   
   6. Iść na spacer.
   
   
   7. Idź po sklep spożywczy.
   
   
   8. Oglądać telewizję
   
   
   9. Jakiś tekst.
   
   
   10. Jakiś tekst.
   
   
   11. Jakiś tekst.
   
   
   12. Jakiś tekst.
   
   
   13. Jakiś tekst.
   
   
   14. Jakiś tekst.
   
   
   15. Jakiś tekst.
   
   
   16. Jakiś tekst.
   
   
   17. Jakiś tekst.
   
   
   18. Jakiś tekst.
   
   
   19. Jakiś tekst.
   
   
   20. Jakiś tekst.
   
   
   21. Jakiś tekst.
   
   
   22. Jakiś tekst.
   
   
   23. Jakiś tekst.
   
   
   24. Jakiś tekst.
   
   
   25. Jakiś tekst.
   
   
   26. Jakiś tekst.
   
   
   27. Jakiś tekst.
   
   
   28. Jakiś tekst.
   
   
   29. Jakiś tekst.
   
   
   30. Jakiś tekst.
   
   
   
   

   Następnie zapewnimy styl DIV o imieniu Sticky:

   • Tutaj, ".lepki”Reprezentuje klasę, w której należy zastosować właściwości stylu.
   • Wewnątrz kręconych nawiasów przypisamy „pozycja„Wartość nieruchomości jako„lepki".
   • „„szczyt”Jest ustawiony jako„0".
   • „„kolor tła" Jest "#00154f".
   • Daj trochę "wyściółka”Do Div, ustalając jego wartość jako„40px".
   • "rozmiar czcionki" Jak "30px".
   • "kolor„Czcionki jest ustawione jako„biały".

   CSS

   .lepki
   Pozycja: lepka;
   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ć wyjście:

   Bonusowa wskazówka

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

   kolor tła: HSLA (0, 100%, 90%, 0.8);

   Wyjście

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

   Wniosek

   „„lepki”Pozycja w CSS, sprawia, że ​​pozycja elementu przełączona między względnym i ustalonym. W rezultacie dodany element lepki jest ustawiony w stosunku do zwoju, aż osiągnie określony punkt, gdy zachowuje się jak lepki. Możesz także dostosować poziom przezroczystości dodanego elementu lepkiego, wykorzystując metodę HSLA (). Ten blog poprowadził cię do tworzenia prostych i lepkich przejrzystych elementów.