Cách tạo phần tử dính trong HTML

Blog này sẽ thảo luận về thuộc tính vị trí CSS và phương pháp tạo phần tử cố định trong HTML.

Thuộc tính vị trí CSS là gì?

Thuộc tính vị trí CSS chỉ định phương pháp định vị của các phần tử HTML, có thể là tuyệt đối, cố định, thống kê, cố định, kế thừa, tương đối hoặc khởi tạo.

cú pháp

Cú pháp đưa ra ở trên cho thấy thuộc tính vị trí có các giá trị khác nhau. Họ có thể được chỉ định cho phù hợp.

Bây giờ, hãy xem quy trình tạo phần tử cố định trong HTML.

Vị trí CSS: dính là gì?

Phần tử HTML với một “ dính ” vị trí có một vị trí tương đối cho đến khi nó đạt đến một điểm và sau đó hoạt động như một phần tử dính.

Hãy xem qua ví dụ đơn giản để hiểu khái niệm về vị trí cố định CSS.

Ví dụ: Cách tạo phần tử dính trong HTML?
Trong tệp HTML, hãy thêm

cho tiêu đề,

cho đoạn văn và

có tên lớp “ dính ”. Sau đó, thêm thẻ

có danh sách được sắp xếp lồng nhau

với danh sách
1. .

   Ghi chú : Chúng tôi đã lấy một danh sách dài để khi cuộn trang của chúng tôi, bạn có thể quan sát hành vi của phần tử cố định.

   HTML

   < h2 > Sticky Notes: Xem tác dụng của phần tử dính < / h2 >
   < P > vị trí: dính < / P >
   < div lớp = 'dính' > Đây là danh sách việc cần làm của tôi! < / div >
   < P >
   < ol >
   < cái đó > Gọi giám đốc < / cái đó >
   < cái đó > Gặp gỡ nhân viên < / cái đó >
   < cái đó > Gửi báo cáo < / cái đó >
   < cái đó > Đi gặp bác sĩ < / cái đó >
   < cái đó > Đặt một chuyến bay < / cái đó >
   < cái đó > Đi bộ. < / cái đó >
   < cái đó > Đi chợ. < / cái đó >
   < cái đó > Xem tivi < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < cái đó > Một số tiếp theo. < / cái đó >
   < / ol >
   < / P >

   Tiếp theo, chúng tôi sẽ cung cấp kiểu cho div có tên là dính:

   • Nơi đây, ' .dính ” đại diện cho lớp mà các thuộc tính kiểu dáng cần được áp dụng.
   • Bên trong dấu ngoặc nhọn, chúng tôi sẽ chỉ định “ Chức vụ ” giá trị tài sản như “ dính ”.
   • Các ' đứng đầu ” được đặt là “ 0 ”.
   • Các ' màu nền ' Là ' #00154f ”.
   • Cho một ít ' đệm ” vào div bằng cách đặt giá trị của nó là “ 40px ”.
   • “ cỡ chữ ' như ' 30px ”.
   • “ màu sắc ” của phông chữ được đặt là “ trắng ”.

   CSS

   .dính {
   Chức vụ : dính ;
   đứng đầu : 0 ;
   màu nền : #00154f ;
   đệm : 40px ;
   cỡ chữ : 30px ;
   màu sắc : trắng ;
   }

   Lưu tệp HTML và mở nó trong trình duyệt để xem đầu ra:

   

   Tiền thưởng

   Bằng cách sử dụng “ hsla() ”, bạn có thể đặt nền trong suốt cho phần tử dính được thêm vào như sau:

   lai lịch - màu sắc : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   đầu ra

   

   Đây là cách phần tử dính vào vị trí cụ thể bằng cách đặt CSS “ Chức vụ ” giá trị tài sản như “ dính ”.

   Sự kết luận

   Các ' dính ” trong CSS, làm cho vị trí phần tử chuyển đổi giữa tương đối và cố định. Kết quả là, phần tử dính được thêm vào được định vị so với cuộn cho đến khi nó đạt đến một điểm nhất định khi nó hoạt động giống như một miếng dính. Bạn cũng có thể điều chỉnh mức độ trong suốt của phần tử dính được thêm vào bằng cách sử dụng phương thức hsla(). Blog này đã hướng dẫn bạn cách tạo các phần tử trong suốt đơn giản và dính.