Ví dụ: nếu bạn sử dụng các phần tử như lớp phủ (là quy tắc trong thời kỳ hoạt động GDPR) và muốn làm mềm khu vực đằng sau lớp phủ, bạn thường gặp phải vấn đề về bối cảnh xếp chồng . Ví dụ: nếu bạn có các phần tử được định vị hoàn toàn hoặc ở một vị trí cố định, chúng đột nhiên được hiển thị khác với không có bộ lọc được áp dụng. Nhưng có một biện pháp khắc phục.
Đoạn mã sau minh họa ví dụ này. Hộp trong nền thực sự phải được đặt ở trên cùng bên phải, nhưng nó đã được di chuyển:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C nói rõ ràng: "Đó không phải là một lỗi, đó là một tính năng." . Đặc điểm kỹ thuật giải thích mối quan hệ:
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
Phần thảo luận trên GitHub cũng rất đáng đọc.
Các thuộc tính CSS sau đây tạo một ngữ cảnh xếp chồng mới, để các phần tử con được định vị tuyệt đối hoặc cố định không còn hoạt động liên quan đến chế độ xem, mà là với phần tử mẹ đã lọc:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Nhưng có một giải pháp cho vấn đề ban đầu: Bộ lọc phông nền thuộc tính CSS (thực sự được biết đến với chức năng lọc một phần các khu vực đằng sau các phần tử) thực hiện công việc. Một ngữ cảnh xếp chồng mới cũng được tạo ở đây, nhưng điều này không liên quan vì không có phần tử con nào trong phần tử giả:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.