Cách tạo: hình ảnh dính

Học cách sử dụng CSS để tạo hình ảnh dính.

hình ảnh dính

img.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

thử ngay

đã được thiết lập position: sticky; các yếu tố sẽ được định vị dựa trên vị trí cuộn của người dùng.

Các yếu tố dính sẽ chuyển đổi giữa định vị tương đối và cố định, tùy thuộc vào vị trí cuộn. Trước khi đạt đến vị trí dịch chuyển được chỉ định trong khung nhìn, nó sẽ được định vị tương đối - sau đó nó sẽ "dính" lại ở vị trí đó (như position:fixed)

Lưu ý:Internet Explorer, Edge 15 và các phiên bản sớm hơn không hỗ trợ định vị dính. Safari cần một -webkit- tiền tố (xem ví dụ). Để làm cho định vị dính hoạt động, bạn cũng cần ít nhất phải chỉ định top、right、bottom hoặc left của một trong số đó.

Trang liên quan

Hướng dẫn:Hình ảnh CSS

Hướng dẫn:Định vị CSS