Cách tạo: yếu tố dính

Học cách sử dụng CSS để tạo yếu tố dính.

Thử ngay!

Lưu ý:Mẫu này không áp dụng cho Internet Explorer hoặc Edge 15 và các phiên bản trước.

Các yếu tố dính

Mẫu

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

Thử ngay!

Các yếu tố sử dụng position: sticky; 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 chuyển đổi giữa định vị tương đối và cố định dựa trên vị trí cuộn. Trước khi đạt đến vị trí dịch chuyển được chỉ định trong khung nhìn, nó sẽ định vị tương đối, sau đó nó sẽ“dính”ở vị trí đó (như position:fixed).

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

Trang liên quan

Giáo trình:Định vị CSS