Cách thực hiện - Hình ảnh dính
Tìm hiểu cách tạo hình ảnh cố đị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
Ví dụ
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Hãy tự mình thử » Một phần tử có position: sticky;
được định vị dựa trên vị trí cuộn của người dùng.
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 một vị trí bù nhất định trong khung nhìn - sau đó nó "cố định" tại chỗ (như vị trí: cố định).
Lưu ý: Internet Explorer, Edge 15 và các phiên bản cũ hơn 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 top
, right
, bottom
hoặc left
để định vị cố định hoạt động.
Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn về Vị trí 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.