Z-index

Đây là một vấn đề phổ biến nhưng rất dễ xử lý khi sử dụng Navi+. Trang web của bạn có thể có nhiều phần tử nổi—xem các ví dụ bên dưới để nhận diện chúng.

Các phần tử nổi này được kiểm soát bởi các giá trị z-index của riêng chúng. Giá trị z-index càng cao, phần tử đó càng có ưu tiên hiển thị trên các phần tử khác. Phần khó khăn là không có quy tắc cố định nào cho các giá trị z-index. Bạn có thể gán bất kỳ số nào lên đến 2,147,483,647. Mỗi giao diện bạn sử dụng và mỗi ứng dụng chạy trên cửa hàng Shopify của bạn có thể gán z-index riêng cho các thành phần nổi—thường dựa trên sở thích của nhà phát triển. Khi các phần tử này tương tác trên trang web của bạn, chúng có thể chồng chéo lên nhau theo những cách không mong muốn.

Hãy cùng vui vẻ một chút :joy:: Hãy nhìn kỹ vào ảnh chụp màn hình ở trên và bạn sẽ thấy—đúng vậy, nó thật lộn xộn, và hoàn toàn không có quy tắc. Có ba nhà phát triển đứng sau trang web mà bạn đang xem.

Nhà phát triển đã xây dựng giao diện Dawn đã chọn z-index là 3 cho Bảng Menu và 1000 cho Bảng Giỏ hàng—hoàn toàn không liên quan, không có logic rõ ràng.

Sau đó là nhà phát triển của ứng dụng Rivo Loyalty Rewards—một công cụ khách hàng trung thành phổ biến—người đã chọn z-index là 99999999999, có lẽ mà không đếm xem họ đã gõ bao nhiêu số chín. Mục tiêu duy nhất của họ: đảm bảo rằng nút “Rewards” nổi luôn ở trên cùng, bất kể điều gì, ngay cả trên Bảng Giỏ hàng của bạn.

Trong khi đó, nhà phát triển Navi+ khiêm tốn chọn một số nhỏ hơn—chỉ 5—bởi vì chúng tôi không muốn quá hung hăng hoặc xâm phạm. Vậy, bạn nên làm gì?

Bước 1: Tìm z-index chính xác của menu Navi+

Phương pháp 1: Hỏi hỗ trợ Navi+ (Đơn giản nhất)

Đây là cách tốt nhất và hiệu quả nhất. Chúng tôi có thể cung cấp cho bạn thông tin về các giá trị z-index của các phần tử giao diện chính như Bảng Menu, Bảng Giỏ hàng và bất kỳ ứng dụng bên thứ ba nào bạn đang sử dụng, sau đó đề xuất cài đặt z-index tốt nhất cho trường hợp của bạn.

Đừng ngần ngại sử dụng hộp trò chuyện ở góc dưới bên phải của màn hình để nói chuyện với một người hỗ trợ Navi+. Navi+ đang phát triển, và chúng tôi thực sự trân trọng phản hồi của bạn—các vấn đề của bạn giúp hướng dẫn chúng tôi xây dựng một sản phẩm tốt hơn.

Chúng tôi không trực tuyến 24/7—chỉ 14 giờ một ngày, dựa trên múi giờ Việt Nam. Tuy nhiên, ngay khi chúng tôi thấy tin nhắn của bạn, chúng tôi sẽ trả lời ngay lập tức.

Phương pháp 2: Sử dụng chế độ Kiểm tra của trình duyệt (chi tiết, nhưng yêu cầu một số kiến thức kỹ thuật)

Cho đến nay, không có phương pháp nào tốt hơn để tự kiểm tra điều này trừ khi bạn sử dụng chế độ Kiểm tra. Công cụ phát triển này có sẵn trong tất cả các trình duyệt hiện đại như Chrome, Firefox, Safari hoặc Edge. Nhấp chuột phải vào bất kỳ đâu trên trang web của bạn và chọn Kiểm tra để mở chế độ Kiểm tra.

Phương pháp 3: Thử và kiểm tra dựa trên các gợi ý của chúng tôi (Kinh nghiệm cá nhân)

Trong hầu hết các trường hợp, các vấn đề z-index rất hiếm nếu bạn không sử dụng quá nhiều ứng dụng. Vấn đề chính thường đến từ sự chồng chéo giữa menu của bạn và các phần tử giao diện khác như Bảng Menu hoặc Bảng Giỏ hàng.

Đối với các menu dính của Navi+ như Tabbar hoặc FAB: Chúng tôi khuyên bạn nên giữ z-index thấp, khoảng 2 hoặc 3. Những menu này chiếm không gian màn hình, và sẽ cảm thấy bị hỏng hoặc khó chịu nếu chúng che khuất các bảng chức năng như giỏ hàng.
Đối với các menu phần của Navi+ như Mega menus: Nếu đặt ở trên cùng (trong tiêu đề), bạn có thể an toàn đặt z-index rất cao (ví dụ: 2000000000) để đảm bảo rằng menu con không bị ẩn sau các thành phần khác.
Đối với các menu Grid của Navi+: z-index không có tác dụng, vì menu là phẳng và không có độ sâu lớp.
Đối với các menu Slide của Navi+: z-index nên được đặt rất cao (ví dụ: 2000000000) để tránh bị ẩn sau các phần tử khác.

Bước 2: Cập nhật z-index của menu Navi+

Cách cập nhật z-index của menu Navi+?

Chọn menu Nâng cao và cuộn xuống để tìm thẻ Z-index sau đó cập nhật z-index và đừng quên nhấp LƯU để áp dụng các thay đổi.

Navi+ Help Center

Z-index