Tại sao css dính không hoạt động?

Tôi có hai trang web nơi tôi có một hàng 2 cột. Cột bên phải có một biểu mẫu, biểu mẫu này sẽ trở nên dính khi bắt đầu cuộn

Tôi đang cố gắng sử dụng CSS

position: sticky;
top: 150px;

Trên trang web đầu tiên nó hoạt động hoàn hảo. Trên trang web thứ hai, sử dụng bản sao của Bố cục Pro, biểu mẫu dính sẽ không dính

Sự khác biệt duy nhất giữa hai trang web là trang thứ hai có div với ID cố định. Div chứa tiêu đề, tích hợp văn bản và biểu mẫu. Trên trang web đầu tiên, tích hợp biểu mẫu có tiêu đề và văn bản trong biểu mẫu được nhúng và ID cố định được áp dụng cho phần tử tích hợp biểu mẫu

Trên trang web thứ hai, tôi thậm chí đã thử xóa div và biến nó thành một phần tử tích hợp biểu mẫu dính đơn giản giống với trang web đầu tiên. Mặc dù vậy, nó vẫn sẽ không dính như trong trang web đầu tiên

Tôi đã kiểm tra các vấn đề điển hình như tràn và flex, nhưng cả hai trang web đều giống hệt nhau trong thiết lập của chúng

Những ngày này, tôi đã phải viết lại một vài yếu tố trên các trang khác nhau để sử dụng một vị trí cố định. Các menu điều hướng chủ yếu cần được cố định ở đầu màn hình khi người dùng cuộn xuống

Trong khi tái cấu trúc các thành phần này, tôi đã thấy một số vấn đề phổ biến ngăn cản position:sticky thực hiện công việc của mình. Hãy xem từng người một

1. Vị trí cố định chỉ hoạt động nếu bất kỳ đạo cụ nào trong số các đạo cụ top, left, bottom, right được đặt. Nó sẽ không hoạt động nếu không có một trong những giá trị này
2. Kiểm tra xem phần tử cha có thuộc tính tràn được đặt thành scroll,

     thead tr:nth-child(1) th{
       background: white;
       position: sticky;
       top: 0;
       z-index: 10;
     }
   

   0 hoặc

     thead tr:nth-child(1) th{
       background: white;
       position: sticky;
       top: 0;
       z-index: 10;
     }
   

   1 không. Nếu tràn của cha mẹ được đặt thành bất kỳ giá trị nào khác ngoài giá trị mặc định (

     thead tr:nth-child(1) th{
       background: white;
       position: sticky;
       top: 0;
       z-index: 10;
     }
   

   2) thì nó có thể phá vỡ phần tử dính của bạn
3. Và có lẽ khó khăn nhất. nếu tổ tiên trực tiếp của phần tử cố định có position:sticky0 thì hãy đảm bảo có trên phần tử cố định có position:sticky1

Nhân tiện, tôi thấy bài viết này khá hữu ích khi gỡ lỗi "độ dính" của một phần tử. Công cụ tuyệt vời. Tôi thực sự thích tập lệnh JS từ bài viết. Bạn có thể dán vào dev tools để kiểm tra xem tràn cha có phá vỡ vị trí dính không

let parent = document.querySelector('.sticky').parentElement;
while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

Tôi hy vọng bạn thích bài viết này và nếu bạn muốn nhận thêm các bài viết về React và phát triển giao diện người dùng, bạn luôn có thể đăng ký danh sách email của tôi

Trong phần này, chúng ta sẽ thử giải câu đố Sticky Header Not Working Chrome bằng cách sử dụng ngôn ngữ máy tính. Mã sau đây phục vụ để minh họa điểm này

  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }

Bằng cách nghiên cứu nhiều ví dụ khác nhau, chúng tôi đã có thể tìm ra cách khắc phục lỗi Sticky Header Not Working Chrome

Tại sao vị trí dính không hoạt động trong Chrome?

Nếu phần tử gốc không được đặt chiều cao thì phần tử dính sẽ không có bất kỳ vùng nào để dính vào khi cuộn. Điều này xảy ra vì phần tử dính có nghĩa là dính/cuộn trong chiều cao của vùng chứa. 26-Apr-2020

Tại sao vị trí cố định của tôi không hoạt động?

Phần tử dính có (các) cha mẹ có thuộc tính tràn Nếu phần tử dính có cha hoặc tổ tiên bị tràn. ẩn, tràn. tự động hoặc tràn. cuộn, sau đó định vị. dính sẽ không hoạt động bình thường. 24-Jul-2021

Vị trí cố định có hoạt động trên Chrome không?

Đây là bản demo từ MDN. vị trí CSS. dính được hỗ trợ trong Firefox, Safari và Chrome Canary (56+). 09-Nov-2016

Tại sao vị trí cố định CSS không hoạt động?

Khắc phục sự cố vị trí cố định Vị trí cố định có thể sẽ không hoạt động nếu tràn được đặt thành ẩn, cuộn hoặc tự động trên bất kỳ phần tử cha nào của phần tử. Vị trí cố định có thể không hoạt động chính xác nếu bất kỳ phần tử gốc nào có chiều cao đã đặt. Nhiều trình duyệt vẫn chưa hỗ trợ định vị cố định

Tại sao CSS hàng đầu không hoạt động?

Để trả lời câu hỏi của bạn tại sao hàng đầu. 50% không hoạt động, khi bạn sử dụng thuộc tính top trên một phần tử, phần tử gốc của phần tử đó cần phải đặt chiều cao tĩnh tại chỗ. Đây phải là px hoặc một đơn vị không phải là phần trăm. 19-Mar-2012

Sự khác biệt giữa dính và cố định là gì?

Sự khác biệt giữa vị trí cố định và cố định là cố định luôn định vị một phần tử so với khung nhìn, trong khi cố định hoạt động giống như một phần tử thông thường cho đến khi nó đạt đến độ lệch đã xác định và sau đó trở thành cố định. 10-Tháng 9-2021

Làm thế nào để bạn sử dụng định vị cố định?

Để xem tác dụng của định vị cố định, hãy chọn vị trí. tùy chọn dính và cuộn vùng chứa này. Phần tử sẽ cuộn cùng với vùng chứa của nó, cho đến khi nó ở trên cùng của vùng chứa (hoặc đạt đến độ lệch được chỉ định trong top ), sau đó sẽ dừng cuộn để nó vẫn hiển thị. 26-Tháng 9-2022

Vị trí dính dính vào đâu?

Bạn ứng tuyển vị trí. nếp; . 15-Mar-2021

Định vị dính có tốt không?

Cố định vị trí CSS có hỗ trợ trình duyệt thực sự tốt, nhưng hầu hết các nhà phát triển không sử dụng nó. Lý do cho điều đó là gấp đôi. Đầu tiên, chờ đợi lâu để được hỗ trợ trình duyệt tốt. Phải mất một thời gian khá dài để hỗ trợ trình duyệt xảy ra và vào thời điểm đó, tính năng này đã bị lãng quên

Vị trí cố định có bị phản đối không?

Internet Explorer chưa bao giờ hỗ trợ thuộc tính cố định CSS và nó sẽ không bao giờ hỗ trợ vì nó không được dùng nữa (cái chết của IE). 24-Aug-2020

CSS dính hoạt động như thế nào?

Tại sao CSS hàng đầu không hoạt động?

Vị trí cố định có hoạt động trên Chrome không?

Tại sao tiêu đề của tôi không dính?