CÁCH THỨC - Hình ảnh dính
Tìm hiểu cách tạo hình ảnh dính bằng CSS.
Hình ảnh dính
Lưu ý: Ví dụ này không hoạt động trong Internet Explorer hoặc Edge 15 và các phiên bản cũ hơn.
Hình ảnh dính
Thí dụ
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Một phần tử với position: sticky;
được định vị dựa trên vị trí cuộn của người dùng.
Một phần tử cố định chuyển đổi giữa relative
và fixed
, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp vị trí bù nhất định trong khung nhìn - sau đó nó "dính" đúng vị trí (như vị trí: fixed).
Lưu ý: Internet Explorer, Edge 15 và các phiên bản trước đó không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải chỉ định ít nhất một trong số top
hoặc để right
định vị cố định hoạt động.bottom
left
Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn Định vị CSS của chúng tôi .
Để tìm hiểu thêm về cách tạo kiểu cho hình ảnh, hãy đọc hướng dẫn Hình ảnh CSS của chúng tôi .