HTML'de Yapışkan Öğe Nasıl Oluşturulur

Bu blog, CSS konumu özelliğini ve HTML'de yapışkan bir öğe oluşturma yöntemini tartışacaktır.

CSS konumu Özelliği nedir?

CSS konumu özelliği, mutlak, yapışkan, istatistik, sabit, kalıtsal, göreli veya ilk olabilen HTML öğelerinin konumlandırma yöntemini belirtir.

Sözdizimi

Yukarıda verilen sözdizimi, konum özelliğinin farklı değerlere sahip olduğunu gösterir. Buna göre atanabilirler.

Şimdi, HTML'de yapışkan öğeler oluşturma prosedürünü inceleyelim.

CSS konumu nedir: yapışkan?

“ile HTML öğesi yapışkan ” konumu, bir noktaya ulaşana kadar göreceli bir konuma sahiptir ve ardından yapışkan bir öğe gibi davranır.

CSS yapışkan konumu kavramını anlamak için basit bir örnek üzerinden gidelim.

Örnek: HTML'de Yapışkan Öğe Nasıl Oluşturulur?
HTML dosyasında, başlık için

, paragraf için

ve “ sınıf adına sahip

ekleyin. yapışkan ”. Ardından, sıralı liste

ile
1. listesini iç içe geçirerek bir

   etiketi ekleyin.

   Not : Sayfamızda gezinirken yapışkan elemanın davranışını gözlemleyebilmeniz için uzun bir liste tuttuk.

   HTML

   < h2 > Yapışkan Notlar: Yapışkan Öğenin Etkisini Görün < / h2 >
   < p > pozisyon: yapışkan < / p >
   < div sınıf = 'yapışkan' > Bu benim Yapılacaklar Listem! < / div >
   < p >
   < ol >
   < o > Çağrı yöneticisi < / o >
   < o > Çalışanlarla Toplantı < / o >
   < o > Rapor gönder < / o >
   < o > Doktora git < / o >
   < o > Uçuş ayarlamak < / o >
   < o > Yürüyüşe çıkmak. < / o >
   < o > Markete git. < / o >
   < o > TV izle < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < o > Bazı metin. < / o >
   < / ol >
   < / p >

   Ardından, sticky adlı div'e stil sağlayacağız:

   • Burada, ' .yapışkan ”, stil özelliklerinin uygulanması gereken sınıfı temsil eder.
   • Kıvrımlı parantezlerin içine “ durum 'özellik değeri' olarak yapışkan ”.
   • “ tepe ”, “ olarak ayarlanır 0 ”.
   • “ arka plan rengi ' dır-dir ' #00154f ”.
   • Biraz ver ' dolgu malzemesi değerini ' olarak ayarlayarak div'e ' 40 piksel ”.
   • “ yazı Boyutu ' olarak ' 30 piksel ”.
   • “ renk ” of fonts” olarak ayarlandı beyaz ”.

   CSS

   .yapışkan {
   durum : yapışkan ;
   tepe : 0 ;
   arka plan rengi : #00154f ;
   dolgu malzemesi : 40 piksel ;
   yazı Boyutu : 30 piksel ;
   renk : beyaz ;
   }

   Çıktıyı görmek için HTML dosyasını kaydedin ve tarayıcıda açın:

   

   Bonus İpucu

   “ kullanarak hsla() ” yöntemiyle, eklenen yapışkan öğe için şeffaf bir arka planı aşağıdaki gibi ayarlayabilirsiniz:

   arka fon - renk : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   Çıktı

   

   Bu, CSS'yi ayarlayarak öğenin belirli bir konuma nasıl yapıştığıdır ' durum 'özellik değeri' olarak yapışkan ”.

   Çözüm

   “ yapışkan ” konumu, öğe konumunun göreli ve sabit arasında geçiş yapmasını sağlar. Sonuç olarak eklenen sticky eleman sticky gibi davrandığında belirli bir noktaya gelene kadar scrolla göre konumlanır. Eklenen yapışkan öğenin şeffaflık seviyesini hsla() yöntemini kullanarak da ayarlayabilirsiniz. Bu blog size basit ve yapışkan şeffaf öğeler yapma konusunda rehberlik etti.