Vì sao code position: sticky của tôi không hoạt động?

Position sticky là gì Position sticky là một thuộc tính lai giữa position relative và fixed. Element sẽ hiển thị giống position relative cho đến khi vượt qua một điểm cụ thể, element đó sẽ “sticky” vào viewport tương tự như position fixed. Phần giải thích của mình có thể hơi khó hiểu. Mọi người

Position sticky là gì

Position sticky là một thuộc tính lai giữa position relative và fixed. Element sẽ hiển thị giống position relative cho đến khi vượt qua một điểm cụ thể, element đó sẽ “sticky” vào viewport tương tự như position fixed.

Phần giải thích của mình có thể hơi khó hiểu. Mọi người có thể thấy được sự hữu dụng của position: sticky qua ví dụ được lấy từ MDN

Cách sử dụng

Để áp dụng position sticky cho một element, mọi người chỉ cần thêm position: sticky; cùng với ít nhất 1 trong 4 thuộc tính vị trí left, top, right, bottom.

Ở ví dụ này, element có class sticky sẽ “dính” vào viewport khi khoảng cách đến top là 20px.

.sticky {
    position: sticky;
    top: 20px;
}

Vì sao code position: sticky; của tôi không hoạt động?

Nếu mọi người gặp vấn đề không thấy element sticky của mình hoạt động đúng. Hãy thử tìm xem có element cha nào của element sticky có thuộc tính overflow: scroll, auto hoặc hidden hay không. Có thể là element cha ở bất kì cấp nào, không chỉ là element cha trực tiếp (thường là thẻ <body> sẽ có thuộc tính overflow-x: hidden).

Ở ví dụ này, mọi người có thể thấy box sticky đúng như mong muốn cho đến khi click vào button “Bật tắt …” bên dưới.

Nguồn: viblo.asia

Bài viết liên quan

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th