Tạo các phần tử dính trong CSS Vị trí sử dụng: dính

Có một giá trị mới trong thị trấn cho thuộc tính vị trí CSS: sticky . Nó cho phép ta làm cho các phần tử dính lại khi cuộn đến một điểm nhất định. Một phần tử có position: sticky sẽ hoạt động giống như một phần tử được định vị tương đối cho đến khi nó đạt đến một điểm được chỉ định và sau đó bắt đầu hoạt động như một phần tử được định vị tĩnh. Trong bài đăng này, ta sẽ tạo một ví dụ đơn giản để minh họa.

Ta sẽ có một containers div sẽ là một containers linh hoạt và sau đó 4 phần tử div bổ sung sẽ là các mục linh hoạt. Lưu ý ta không phải sử dụng flexbox cho vị trí: dính để làm việc, ở đây chỉ là flexbox hoạt động tốt cho ví dụ của ta .

Kiểm tra lớp sơn lót flexbox của ta nếu bạn muốn cập nhật các thuộc tính và giá trị flexbox khác nhau.

Đây là đánh dấu đơn giản:

<div class="container">   <div class="item punk">     <img src="/images/punk.svg" width="100" alt="Item 1">   </div>   <div class="item pony">     <img src="/images/pony.svg" width="100" alt="Item 2">   </div>   <div class="item dino">     <img src="/images/dino.svg" width="100" alt="Item 3">   </div>   <div class="item steampunk">     <img src="/images/steampunk.svg" width="100" alt="Item 4">   </div> </div>

Và bây giờ là phong cách của ta , với các luật quan trọng được đánh dấu:

.container {   display: flex;   justify-content: space-around;   align-items: flex-start;    border: 2px dashed rgba(114, 186, 94, 0.35);   height: 400px;   background: rgba(114, 186, 94, 0.05); }  .punk {   position: -webkit-sticky;   position: sticky;   top: 4rem; }  .pony {   position: -webkit-sticky;   position: sticky;   top: 0; }  .dino {   position: -webkit-sticky;   position: sticky;   bottom: 1rem;   align-self: flex-end; }

Và đây là kết quả. Hãy thử cuộn trang lên và xuống để xem điều gì sẽ xảy ra:

Nếu vị trí: dính không hoạt động: Có hai trường hợp phổ biến khi một phần tử được đặt thành position: sticky; sẽ không thực sự dính vào cửa sổ như dự định:

Không có thuộc tính vị trí nào được xác định: Đảm bảo rằng phần tử dính có bộ top , bottom . Hoặc trong trường hợp cuộn ngang, left hoặc right .)
Một trong những tổ tiên của phần tử có phần tử overflow không tương thích: Nếu bất kỳ phần tử cha nào bên trên phần tử dính có tràn (x hoặc y) được đặt thành hidden , scroll hoặc auto , dính sẽ không hoạt động.

Kết luận

Dưới đây là một số điều bổ sung cần lưu ý:

Với ví dụ của ta , luật align-items: flex-start trên containers flex rất quan trọng vì nếu không, các mục flex được mặc định thành giá trị của stretch trong đó các phần tử sẽ chiếm toàn bộ chiều cao của containers , hủy hiệu ứng dính.
Ta cần sử dụng tiền tố nhà cung cấp -webkit-sticky để nó hoạt động trong Safari.
Lưu ý các phần tử có vị trí cố định chỉ dính trong phần tử mẹ của chúng.
Hỗ trợ trình duyệt cho position: sticky : Tính đến năm 2020, 95% trình duyệt có một số mức hỗ trợ. Để biết chi tiết, hãy xem Tôi có thể sử dụng css-stick không

Tags:

Các tin liên quan

Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn
2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01