Cách cố định các phần tử (đối tượng) bằng CSS

Dưới đây, chúng ta sẽ trình bày cách cố định các phần tử bằng CSS. Bạn có thể áp dụng nhiều ứng dụng khác nhau như cố định tiêu đề hoặc menu hamburger ở phía trên màn hình, vì vậy hãy học cách làm điều này.

Có hai phương pháp chính để cố định các phần tử bằng CSS:

1. position: fixed; - Cố định vị trí của phần tử
2. position: sticky; - Cố định phần tử dựa trên cuộn trang của phần tử cha

Bây giờ, chúng ta sẽ tìm hiểu cụ thể về từng phương pháp.

Cách cố định bằng ‘position: fixed;’

Trước hết, hãy tìm hiểu về cách sử dụng ‘position: fixed;’.

Khi bạn áp dụng ‘position: fixed;’ cho một phần tử, nó sẽ hiển thị ngay khi trang web được tải và vẫn ở ở vị trí đã được chỉ định khi bạn cuộn trang.

Khi không sử dụng ‘position: fixed;’

Xin hãy chú ý đến hộp màu đỏ.

Khi không cố định phần tử, phần tử sẽ di chuyển lên trên cùng khi bạn cuộn trang.

Khi sử dụng ‘position: fixed;’

Khi bạn cố định phần tử bằng ‘position: fixed;’, nó sẽ không biến mất khi bạn cuộn trang mà vẫn ở ở đầu trang.

Nếu bạn đã áp dụng ‘position: fixed;’ cho phần tử trước, các phần tử sau sẽ che phủ phần tử đó, do đó, bạn cần sử dụng thuộc tính “z-index” để xác định thứ tự hiển thị của chúng.

Cú pháp như sau:

element_name {
  position: fixed;
  top: 0px; /* Vị trí bạn muốn cố định (ví dụ: từ đầu trang 0px) */
  left: 10px; /* Vị trí bạn muốn cố định (ví dụ: từ bên trái 10px) */
}

Trong đó element_name là tên phần tử bạn muốn cố định.

Bạn có thể sử dụng các giá trị như ‘top’, ‘bottom’, ‘left’, ‘right’ để chỉ định vị trí của phần tử.

Cách cố định bằng ‘position: sticky;’

Tiếp theo, chúng ta sẽ tìm hiểu cách sử dụng ‘position: sticky;’.

Khi bạn áp dụng ‘position: sticky;’ cho một phần tử, phần tử đó sẽ được cố định trong phạm vi của phần tử cha, tùy theo cuộn trang.

Khi không sử dụng ‘position: sticky;’

Khi không cố định bằng ‘position: sticky;’, khi bạn cuộn trang, phần tử màu vàng sẽ di chuyển lên trên cùng cùng với phần tử cha màu xanh.

Khi sử dụng ‘position: sticky;’

Cú pháp như sau:

selector (element_name) {
  position: sticky;
  top: 0px; /* Vị trí bạn muốn cố định */
}

Trong đó selector được lấy từ phần tử cha, và element_name là tên phần tử con mà bạn muốn cố định vị trí.

Lưu ý rằng khi sử dụng ‘position: sticky;’, phải chắc chắn rằng phần tử cha của phần tử cố định không có thuộc tính ‘overflow: hidden;’ (không hiển thị nội dung bên ngoài khung) để tránh xảy ra lỗi.

Tổng kết
Trong bài viết này, Kiyoshi đã giới thiệu cách cố định các phần tử. Hãy hiểu rõ sự khác biệt giữa chúng và áp dụng chúng đúng cách. Và mong rằng bài viết sẽ có ích với bạn.