Lớp trên cùng nằm phía trên document có liên quan trong khung nhìn của trình duyệt và mỗi document có một lớp trên cùng được liên kết. Điều này có nghĩa là các phần tử được quảng bá lên lớp trên cùng không cần phải quan tâm đến z-index hoặc hệ phân cấp DOM. Chúng cũng có một phần tử giả ::backdrop gọn gàng để chơi. Thông số Fullscreen API chi tiết hơn vì chế độ Toàn màn hình là một ví dụ hay về lớp trên cùng được sử dụng trước khi hỗ trợ dialog xuất hiện.
Lớp trên cùng giúp giải quyết vấn đề kết xuất nội dung phía trên phần còn lại của document.
Những điều quan trọng cần nhớ:
– Lớp trên cùng nằm ngoài luồng document.
– z-index không có hiệu lực ở lớp trên cùng.
– Mỗi phần tử ở lớp trên cùng có một phần tử giả ::backdrop có thể tạo kiểu.
– Mỗi phần tử và ::backdrop tạo ra một ngữ cảnh xếp chồng mới.
– Các phần tử trong lớp trên cùng được xếp chồng theo thứ tự xuất hiện trong tập hợp. Mục cuối cùng trong, xuất hiện ở trên cùng. Nếu bạn muốn quảng bá một phần tử, hãy xoá rồi thêm lại phần tử đó.
Cho đến bây giờ, chúng tôi đã bắt chước lớp trên cùng như thế nào? Không phải là hiếm khi bạn thấy các nhà phát triển bỏ một phần tử vùng chứa trống ở cuối body. Sau đó, thứ này sẽ được dùng làm "giả" lớp trên cùng. Ý tưởng là vùng chứa này được đặt phía trên mọi thứ khác trong ngăn xếp. Khi bạn muốn quảng cáo nội dung nào đó phía trên những thứ khác, bạn sẽ thêm nó vào vùng chứa đó. Chúng ta có thể thấy thông tin này trong các gói phổ biến như SweetAlert, reactjs-popup, Magnific Popup và các gói khác.
Với các thành phần và API mới được tích hợp sẵn như <dialog> và "Popover", bạn sẽ không cần phải dùng đến các giải pháp này. Bạn có thể quảng bá nội dung lên lớp trên cùng.
Khung giao diện người dùng cho phép chúng tôi cùng xác định vị trí các thành phần được quảng bá với các thành phần tương ứng. Tuy nhiên, chúng thường được tách riêng trong DOM khi kết xuất.
Khi sử dụng lớp trên cùng, các phần tử được quảng bá sẽ là nơi bạn đặt chúng vào mã nguồn (ví dụ: <dialog>). Không quan trọng là phần tử đó có bao nhiêu lớp trong DOM. Thành phần này sẽ được thăng cấp lên lớp trên cùng và bạn có thể kiểm tra ở vị trí bạn mong đợi, cùng đặt với HTML thành phần. Điều này giúp bạn dễ dàng kiểm tra cả phần tử điều kiện kích hoạt và phần tử được quảng bá trong DOM cùng một lúc. Đặc biệt hữu ích nếu phần tử của điều kiện kích hoạt đang cập nhật thuộc tính, chẳng hạn. Phương pháp này cũng giúp tăng khả năng tiếp cận khi các thành phần cùng được bố trí.
Để minh hoạ lớp trên cùng so với z-index cao, hãy xem bản minh hoạ sau.
Trong bản minh hoạ này, bạn có thể mở cửa sổ bật lên của SweetAlert cũng như mở lớp trên cùng <dialog>. Mở <dialog> rồi thử mở cửa sổ bật lên SweetAlert. Bạn sẽ thấy lớp này xuất hiện bên dưới phần tử lớp trên cùng. Thư mục gốc của cửa sổ bật lên SweetAlert là sử dụng z-index 10000 với position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Bạn không cần áp dụng kiểu nào cho <dialog> để làm cho thành phần này xuất hiện phía trên tất cả nội dung khác.
Công cụ cho nhà phát triển
Điều đó mang chúng ta đến với tính năng hỗ trợ Công cụ cho nhà phát triển. Công cụ của Chrome cho nhà phát triển đang bổ sung tính năng hỗ trợ cho các phần tử lớp trên cùng để bạn có thể kiểm tra lớp trên cùng. Điều này giúp bạn dễ dàng gỡ lỗi và trực quan hoá cách mọi thứ đang xếp chồng ở lớp trên cùng hoặc thậm chí là những gì ở lớp trên cùng.
Alina Varkki có một bài viết hay đi sâu vào cách sử dụng các công cụ này. Các API này hiện được cung cấp dưới dạng tính năng xem trước trong Chrome Canary phiên bản 105.
Vậy là xong!
Giới thiệu ngắn gọn về lớp trên cùng. Bạn có thể nói "Tạm biệt!" cho những việc như:
.popup-container {
z-index: 10000;
}
Bạn sẽ đẩy gì vào Lớp trên cùng? Bạn đã dùng thử dialog chưa? Hoặc đã xem OpenUI Popover API? Nhớ báo cho chúng tôi nhé!