Как создать липкий элемент в HTML

В этом блоге мы обсудим свойство позиции CSS и метод создания закрепленного элемента в HTML.

Что такое свойство CSS position?

Свойство CSS position указывает метод позиционирования HTML-элементов, который может быть абсолютным, фиксированным, статистическим, фиксированным, наследуемым, относительным или начальным.

Синтаксис

Приведенный выше синтаксис показывает, что свойство position имеет разные значения. Их можно назначить соответствующим образом.

Теперь давайте рассмотрим процедуру создания липких элементов в HTML.

Что такое позиция CSS: липкая?

HTML-элемент с « липкий ” position имеет относительное положение, пока не достигнет точки, а затем действует как липкий элемент.

Давайте рассмотрим простой пример, чтобы понять концепцию фиксированной позиции CSS.

Пример: Как создать липкий элемент в HTML?
В файле HTML добавьте

для заголовка,

для абзаца и

с именем класса « липкий ». Затем добавьте тег

, содержащий вложенный упорядоченный список

со списком
1. .

   Примечание : Мы взяли длинный список, чтобы при прокрутке нашей страницы вы могли наблюдать за поведением закрепленного элемента.

   HTML

   < h2 > Sticky Notes: посмотрите на эффект Sticky Element < / h2 >
   < п > положение: липкое < / п >
   < див учебный класс знак равно 'липкий' > Это мой список дел! < / див >
   < п >
   < ол >
   < что > Менеджер звонков < / что >
   < что > Встреча с сотрудниками < / что >
   < что > Отправить отчет < / что >
   < что > Сходи к врачу < / что >
   < что > Забронировать рейс < / что >
   < что > Идти гулять. < / что >
   < что > Идите за продуктами. < / что >
   < что > Смотреть телевизор < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < что > Какой-то текст. < / что >
   < / ол >
   < / п >

   Далее мы добавим стиль в div с именем sticky:

   • Здесь, ' липкий ” представляет класс, в котором необходимо применить свойства стиля.
   • Внутри фигурных скобок мы назначим « должность ” значение свойства как “ липкий ».
   • “ Топ » устанавливается как « 0 ».
   • “ фоновый цвет ' является ' #00154f ».
   • Дайте немного “ набивка ' в div, установив его значение как ' 40 пикселей ».
   • “ размер шрифта ' в качестве ' 30 пикселей ».
   • “ цвет » шрифтов устанавливается как « белый ».

   CSS

   липкий {
   должность : липкий ;
   Топ : 0 ;
   фоновый цвет : #00154f ;
   набивка : 40 пикселей ;
   размер шрифта : 30 пикселей ;
   цвет : белый ;
   }

   Сохраните HTML-файл и откройте его в браузере, чтобы увидеть результат:

   

   Бонусный совет

   С помощью « hsla() », вы можете установить прозрачный фон для добавленного липкого элемента следующим образом:

   фон - цвет : хсла ( 0 , 100 %, 90 %, 0,8 ) ;

   Выход

   

   Вот как элемент прикрепляется к определенной позиции, устанавливая CSS « должность ” значение свойства как “ липкий ».

   Вывод

   “ липкий ” position в CSS, заставляет положение элемента переключаться между относительным и фиксированным. В результате добавленный липкий элемент позиционируется относительно прокрутки до тех пор, пока не достигнет определенной точки, когда он будет вести себя как липкий. Вы также можете настроить уровень прозрачности добавленного липкого элемента, используя метод hsla(). В этом блоге вы узнаете, как создавать простые и липкие прозрачные элементы.