Cara Membuat Elemen Melekit dalam HTML

Blog ini akan membincangkan sifat kedudukan CSS dan kaedah untuk mencipta elemen melekit dalam HTML.

Apakah Harta kedudukan CSS?

Sifat kedudukan CSS menentukan kaedah penentududukan elemen HTML, yang boleh menjadi mutlak, melekit, statistik, tetap, mewarisi, relatif atau awal.

Sintaks

Sintaks yang diberikan di atas menunjukkan bahawa sifat kedudukan mempunyai nilai yang berbeza. Mereka boleh ditugaskan dengan sewajarnya.

Sekarang, mari kita lihat prosedur untuk mencipta elemen melekit dalam HTML.

Apakah kedudukan CSS: melekit?

Elemen HTML dengan “ melekit ” kedudukan mempunyai kedudukan relatif sehingga mencapai satu titik dan kemudian bertindak seperti unsur melekit.

Mari kita lihat contoh mudah untuk memahami konsep kedudukan melekat CSS.

Contoh: Bagaimana untuk Mencipta Elemen Melekit dalam HTML?
Dalam fail HTML, tambahkan

untuk tajuk,

untuk perenggan dan

yang mempunyai nama kelas “ melekit ”. Kemudian, tambahkan teg

yang mempunyai senarai tertib bersarang

dengan senarai
1. .

   Catatan : Kami telah mengambil senarai panjang supaya apabila menatal halaman kami, anda boleh memerhatikan gelagat elemen melekit.

   HTML

   < h2 > Nota Melekit: Lihat Kesan Elemen Melekit < / h2 >
   < hlm > kedudukan: melekit < / hlm >
   < div kelas = 'melekit' > Ini ialah Senarai Tugasan saya! < / div >
   < hlm >
   < ol >
   < itu > Pengurus Panggilan < / itu >
   < itu > Pertemuan dengan Pekerja < / itu >
   < itu > Hantar Laporan < / itu >
   < itu > Pergi ke Doktor < / itu >
   < itu > Tempah penerbangan < / itu >
   < itu > Pergi berjalan. < / itu >
   < itu > Pergi ke kedai runcit. < / itu >
   < itu > Menonton TV < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < itu > Beberapa teks. < / itu >
   < / ol >
   < / hlm >

   Seterusnya, kami akan menyediakan gaya kepada div bernama sticky:

   • Di sini, ' .melekit ” mewakili kelas di mana sifat gaya perlu digunakan.
   • Di dalam kurungan kerinting, kami akan menetapkan ' kedudukan ” nilai harta sebagai “ melekit ”.
   • ' atas ” ditetapkan sebagai “ 0 ”.
   • ' warna latar belakang ” ialah “ #00154f ”.
   • Beri sedikit ' padding ” kepada div dengan menetapkan nilainya sebagai “ 40px ”.
   • “ Saiz huruf 'sebagai' 30px ”.
   • “ warna ” fon ditetapkan sebagai “ putih ”.

   CSS

   .melekit {
   kedudukan : melekit ;
   atas : 0 ;
   warna latar belakang : #00154f ;
   padding : 40px ;
   Saiz huruf : 30px ;
   warna : putih ;
   }

   Simpan fail HTML dan bukanya dalam penyemak imbas untuk melihat output:

   

   Petua Bonus

   Dengan menggunakan ' hsla() ”, anda boleh menetapkan latar belakang lutsinar untuk elemen melekit tambahan seperti berikut:

   latar belakang - warna : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Pengeluaran

   

   Beginilah cara elemen melekat pada kedudukan tertentu dengan menetapkan CSS “ kedudukan ” nilai harta sebagai “ melekit ”.

   Kesimpulan

   ' melekit ” dalam CSS, menjadikan kedudukan elemen bertukar antara relatif dan tetap. Akibatnya, elemen melekit yang ditambahkan diposisikan secara relatif kepada skrol sehingga ia mencapai titik tertentu apabila ia berkelakuan seperti melekit. Anda juga boleh melaraskan tahap ketelusan unsur melekit tambahan dengan menggunakan kaedah hsla(). Blog ini membimbing anda tentang membuat elemen lutsinar yang mudah dan melekit.