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 thăng cấp lên lớp trên cùng không cần phải quan tâm đến hệ phân cấp z-index hoặc DOM. Chúng cũng nhận được một phần tử giả ::backdrop gọn gàng để sử dụng. Thông số kỹ thuật Fullscreen API (API toàn màn hình) chi tiết hơn vì Fullscreen là ví dụ tuyệt vời về lớp trên cùng được sử dụng trước khi hỗ trợ dialog ra mắt.
Lớp trên cùng giúp giải quyết vấn đề hiển thị nội dung ở 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ử trong 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ử ở lớp trên cùng được xếp chồng theo thứ tự xuất hiện trong nhóm. Bản in cuối cùng sẽ 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ử đó.
Chúng ta đã bắt chước lớp trên cùng như thế nào cho đến bây giờ? Không có gì lạ khi các nhà phát triển thả một phần tử vùng chứa trống ở cuối body. Sau đó, lớp này sẽ được sử dụng như lớp trên cùng "giả". Ý tưởng là vùng chứa này được định vị phía trên mọi nội dung khác trong ngăn xếp. Khi bạn muốn quảng cáo thứ gì đó phía trên mọi thứ khác, bạn sẽ thêm nó vào vùng chứa đó. Chúng ta có thể thấy điều này trong các gói phổ biến như SweetAlert, reactjs-pop, 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 sử dụng các giải pháp này. Bạn có thể đưa 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 xác định cùng lúc các thành phần được quảng cáo với các thành phần tương ứng. Tuy nhiên, các mô-đun này thường được tách riêng trong DOM khi nói đến việc hiển thị.
Bằng cách sử dụng lớp trên cùng, các phần tử được quảng bá là nơi bạn đặt chúng trong mã nguồn của mình (ví dụ: <dialog>). Bất kể là bao nhiêu lớp trong DOM, phần tử đó là gì. Thành phần này sẽ được đẩy lên lớp trên cùng và bạn có thể kiểm tra vị trí mà bạn mong đợi, cùng vị trí với HTML thành phần. Điều này giúp bạn dễ dàng kiểm tra cùng lúc cả phần tử điều kiện kích hoạt và phần tử được quảng cáo trong DOM. Đặc biệt hữu ích nếu phần tử điều kiện kích hoạt của bạn đang cập nhật thuộc tính, chẳng hạn như. Việc này cũng mang lại một lợi ích bổ sung cho khả năng tiếp cận khi các phần tử được đặt cùng vị trí.
Để minh hoạ lớp trên cùng so với z-index cao, hãy xem xét bản minh hoạ này.
Trong bản minh hoạ này, bạn có thể mở cửa sổ bật lên SwingAlert và cũng mở lớp trên cùng <dialog>. Mở <dialog>, sau đó thử mở cửa sổ bật lên SwingAlert. Bạn sẽ thấy nó xuất hiện bên dưới phần tử lớp trên cùng của chúng ta. Và gốc của cửa sổ bật lên (swekeAlert) đang sử dụng z-index là 10.000 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> để <dialog> này xuất hiện phía trên mọi nội dung khác.
DevTools
Điều đó giúp chúng tôi tiếp tục hỗ trợ Công cụ cho nhà phát triển. Công cụ của Chrome cho nhà phát triển đang thêm 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ì nằm trong lớp trên cùng.
Alina Varkki có bài viết tuyệt vời chuyên sâu về cách sử dụng các công cụ này. Các bản ghi này hiện có sẵn 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. Giúp bạn nói "Tạm biệt!" với những câu như:
.popup-container {
z-index: 10000;
}
Bạn sẽ đưa gì vào Lớp trên cùng? Bạn đã thử dùng dialog chưa? Hoặc đã xem OpenUI Popover API? Nhớ báo cho chúng tôi nhé!