Cách đổi z-index của thanh tab bar trên Shopify (không đè lên giỏ hàng hay popup)

Quick answer: how to change the z-index of a tab bar

Để đổi z-index của tab bar, hãy inspect tab bar và phần tử va chạm, so sánh giá trị z-index của chúng, sau đó đặt giá trị tab bar thấp hơn hoặc cao hơn trong Custom CSS của theme hoặc cài đặt app tab bar. Giá trị cao hơn sẽ hiển thị phía trước.

Hãy đặt tab bar nằm dưới cart drawer và popup để khách hàng thao tác thanh toán thuận tiện, nhưng nằm trên nội dung trang cuộn thông thường. Sau khi thay đổi số nguyên phân lớp, hãy luôn kiểm tra lại trên điện thoại thật.

Why your tab bar covers (or hides behind) other elements

Thanh tab bar đáy di động sử dụng thuộc tính vị trí cố định (fixed) để giữ thanh điều hướng luôn nằm trong tầm với của ngón tay cái khi cuộn trang. Vì luôn cố định khi nội dung cửa hàng cuộn bên dưới, tab bar phải nằm trên một lớp hiển thị nổi cao hơn văn bản và lưới sản phẩm thông thường.

Va chạm xảy ra vì storefront hiện đại sử dụng đồng thời nhiều thành phần nổi: cart drawer trượt, khung tìm kiếm, popup, widget chat hỗ trợ và thanh thông báo. Mỗi theme và mỗi nhà phát triển app tự đặt số nguyên phân lớp cho thành phần của mình, nên không có một con số duy nhất đúng cho mọi cửa hàng.

Sự thiếu đồng bộ này dẫn đến hai lỗi hiển thị phổ biến trên màn hình di động:

• Tab bar che cart drawer: Tab bar vẽ đè trực tiếp lên chân giỏ hàng trượt, che mất nút checkout hoặc tổng tiền vì giá trị lớp của tab bar cao hơn giỏ hàng.
• Tab bar biến mất sau một section: Tab bar bị chìm sau banner quảng cáo, video hero hoặc slider vì section đó có giá trị lớp cao hơn hoặc tự tạo ngữ cảnh xếp chồng riêng.

Hiểu về mobile tab bar architecture giúp bạn nhận ra điều hướng đáy cần phối hợp nhịp nhàng với các lớp nổi khác trên trang thay vì cạnh tranh số hiển thị một cách ngẫu nhiên.

How z-index and stacking contexts work, in plain terms

Trong CSS, thuộc tính z-index điều khiển cách các phần tử xếp chồng lên nhau dọc theo trục z ảo hướng về phía người nhìn. Theo MDN Understanding z-index, giá trị z-index là số nguyên (dương, âm hoặc 0) quyết định thứ tự vẽ, cho phép bạn đặt phần tử phía trước hoặc phía sau phần tử khác trong cùng stacking context.

Điều kiện cốt lõi là trong cùng stacking context.

Theo định nghĩa của Google web.dev, “Stacking context là nhóm phần tử chung cha, lên xuống trục z cùng nhau.” Hãy hình dung các stacking context như những chiếc hộp carton. Nếu hai tấm thẻ nằm chung một hộp, tấm thẻ có số nguyên cao hơn sẽ nằm trước. Nhưng nếu Thẻ A nằm trong Hộp 1, và Hộp 1 đặt dưới Hộp 2, Thẻ A không bao giờ nằm trước Hộp 2—dù bạn gán cho Thẻ A số lớn đến đâu.

Minh họa khái niệm: Phần tử con không thể thoát khỏi stacking context của cha; nếu container cha nằm thấp hơn trên trục z, z-index con dù cao vẫn hiển thị dưới các overlay ngang hàng.

Khi hai phần tử không phải anh em trực tiếp, việc xếp chồng phức tạp hơn vì mỗi phần tử có thể thuộc một stacking context riêng biệt. Trình duyệt sẽ tự tạo một stacking context mới khi một phần tử sử dụng:

• position: fixed hoặc position: sticky
• opacity nhỏ hơn 1
• transform, filter, hoặc perspective có giá trị khác none

Vì menu đáy và header dính đều chia sẻ các thuộc tính này, cơ chế tương tự cũng diễn ra giữa sticky header and footer menus. Nếu một wrapper của app hoặc container của theme tạo stacking context riêng, việc tăng số của tab bar con sẽ không có tác dụng với phần tử bên ngoài.

Find what’s overlapping with browser DevTools

Trước khi sửa mã nguồn, hãy inspect các phần tử va chạm để đọc kiểu tính toán thực tế và container cha của chúng.

Minh họa khái niệm: Inspect container ngoài cùng của tab bar trong DevTools để đọc giá trị position và z-index tính toán trong tab Styles.

Desktop Chrome

1. Nhấp chuột phải vào thanh tab bar trên storefront của bạn và chọn Inspect.
2. Trong cây DOM của Elements, tìm phần tử bao ngoài cùng của tab bar (như .mobile-tab-bar hoặc container riêng của app).
3. Xem tab Styles bên phải. Theo tài liệu Google Chrome DevTools docs, tab Styles liệt kê rule CSS đang áp cho phần tử đang chọn. Tìm dòng position và z-index.
4. Mở phần tử va chạm (như cart drawer hoặc khung tìm kiếm), nhấp chuột phải chọn Inspect, và ghi lại z-index cùng position của nó.
5. Kiểm tra ngược lên các thẻ cha của cả hai phần tử xem có cha nào chứa transform, filter hoặc opacity < 1 tạo context riêng không.

Checking the mobile view

Nhấp vào biểu tượng Toggle device toolbar để xem giao diện mobile. Dù trình giả lập hiển thị chính xác media query và cấu trúc DOM, phản hồi cảm ứng thực tế vẫn có thể khác biệt. Hãy dùng DevTools để xác định con số, sau đó kiểm tra lại trên điện thoại thật.

Pick the right layer order for tab bar, cart drawer, popups and chat

Khắc phục va chạm phân lớp không cần phải đoán những con số cực đoan như 999999. Các phần tử có số lớp cao hơn sẽ đè lên phần tử có số lớp thấp hơn trong cùng context, và giá trị có thể là bất kỳ số nguyên nào—dương, âm hoặc 0.

Hãy sắp xếp cửa hàng của bạn theo một hệ thống phân lớp rõ ràng:

Không có số chuẩn chung cho mọi theme Shopify. Khi xem xét how drawer menus are layered, quy tắc cốt lõi là tương đối: số lớp của tab bar phải nhỏ hơn số lớp của cart drawer. Chỉ là số ví dụ: nếu giá trị của giỏ hàng là 100, mọi giá trị của tab bar nhỏ hơn 100 sẽ giữ giỏ hàng ở phía trước. Nếu không tìm thấy số của giỏ hàng, tài liệu của một số app gợi ý thử giá trị 50 và kiểm tra lại trang, sau đó hạ dần nếu vẫn còn va chạm.

Where to change the value: theme custom CSS vs. app settings

Khi đã biết giá trị cần đặt, bạn có thể áp dụng qua Custom CSS của theme hoặc bảng cài đặt của app tab bar.

Theme settings Custom CSS

Trong Shopify Admin, đi tới Online Store > Edit theme > Theme settings > Custom CSS.

Theo trung tâm hỗ trợ Shopify Help Center, CSS đặt tại đây áp dụng cho toàn bộ theme với một số giới hạn cụ thể:

• Giới hạn ký tự: CSS áp dụng cho toàn theme bị giới hạn trong 1500 ký tự.
• Phạm vi của section: CSS thêm vào một section chỉ có tác dụng trong section đó và giới hạn 500 ký tự. Với tab bar nổi toàn trang, bắt buộc dùng Theme settings.
• Cập nhật theme: Khi nâng cấp theme, custom CSS có thể ngừng chạy nếu tên class hoặc cấu trúc selector thay đổi.

/* Example: Adjusting mobile tab bar z-index in Shopify Theme settings > Custom CSS */
/* Replace .custom-tab-bar-wrapper with your actual tab bar container selector */
@media (max-width: 749px) {
  .custom-tab-bar-wrapper {
    /* Example value: ensure this integer sits below your cart drawer */
    z-index: 40;
  }
}

Inside your tab bar app

Nếu thanh tab bar được tạo từ một app, hãy kiểm tra ô z-index có sẵn trong app trước; trang trợ giúp của các nhà phát triển app thường hướng dẫn như vậy, và giá trị này được lưu cùng menu thay vì nằm trong CSS của theme. Để hiểu vì sao nhiều app có thể xung đột trên storefront, xem how app embeds can conflict with your theme.

Why your z-index change does nothing

Khi bạn đổi giá trị lớp nhưng giao diện không suy chuyển, hãy kiểm tra năm nguyên nhân kỹ thuật phổ biến sau:

Mobile-only fixes with a media query

Vì tab bar đáy được thiết kế chủ yếu cho điện thoại, hãy giới hạn các quy tắc CSS cho màn hình di động để không ảnh hưởng đến giao diện máy tính.

Bọc đoạn mã CSS trong một media query phù hợp với breakpoint của theme:

/* Example: Scope tab bar layer order to mobile viewports */
/* 749px is only an example breakpoint; use your own theme's breakpoint */
@media screen and (max-width: 749px) {
  .theme-mobile-tab-bar-container {
    /* Example value: positioned above page content, below cart drawer */
    z-index: 45;
  }
}

Giữ quy tắc CSS ngắn gọn để không vượt quá giới hạn 1500 ký tự trong Theme settings của Shopify. Hãy luôn kiểm tra cả chế độ xoay dọc và xoay ngang để bảo đảm thanh điều hướng không bị vỡ bố cục khi người dùng xoay điện thoại.

Trade-offs: when a high z-index is the wrong fix

Lạm dụng các giá trị lớp quá lớn là giải pháp vội vàng nhưng đi kèm nhiều đánh đổi kỹ thuật thực tế:

• Che mất nút thanh toán: Đặt tab bar cao hơn cart drawer có thể che mất tổng tiền và nút Checkout, khiến khách khó hoàn tất thanh toán.
• Chặn các thông báo pháp lý: Tab bar đè lên banner đồng ý cookie GDPR hoặc popup xác thực độ tuổi khiến khách không thể chấp nhận điều khoản để vào cửa hàng.
• Gây ra cuộc chạy đua số giữa các app: Nhập các số tùy tiện như 2147483647 dễ dẫn tới cuộc đua số không hồi kết giữa các app embed, và vẫn có thể thua nếu stacking context của phần tử cha giữ nó lại. Khi lỗi bắt nguồn từ app khác, hạ lớp của app đó hoặc liên hệ nhà phát triển thường là cách xử lý đúng.
• Rủi ro khi cập nhật theme: Các selector trong Custom CSS có thể ngừng hoạt động khi theme được cập nhật nếu tên class thay đổi. Giá trị lưu trong app tab bar không nằm trong CSS của theme.

Where Navi+ fits

Nếu thanh tab bar của bạn được xây dựng bằng Navi+, bạn không cần phải sửa code theme hay tự viết CSS để chỉnh thứ tự hiển thị.

Bên trong trình chỉnh sửa menu của Navi+:

1. Mở menu bạn muốn sửa từ trang quản trị Navi+.
2. Chuyển sang tab Advanced trong cài đặt menu.
3. Tìm thẻ Z-index (có nhãn “Z-INDEX: Set the menu layer order”).
4. Kiểm tra giá trị hiện tại trong ô Z-index, sau đó nhập số nguyên bạn muốn (ô nhận số từ 0 đến 2147483647).
5. Bấm Save.

Cấu hình phân lớp của bạn được lưu trong thiết lập menu, không nằm trong mã nguồn của theme.

Khi tìm hiểu về mobile navigation beyond the hamburger menu, việc phối hợp nhịp nhàng giữa thanh đáy và các giỏ hàng trượt là chìa khóa cho trải nghiệm mua sắm mượt mà.

If your tab bar comes from Navi+, you don’t need to touch theme code: open the menu, go to Advanced, set the Z-index below your cart drawer, and save. If you’re unsure which value fits your theme, our support team can look at it with you.

Test checklist before you call it fixed

Hoàn thành checklist kiểm thử 10 bước này trước khi đưa thay đổi đến tay khách hàng mua sắm:

• Mở cart drawer: Thêm sản phẩm vào giỏ, mở giỏ hàng trượt và xác nhận các nút số lượng cũng như nút Checkout hiển thị rõ ràng, dễ bấm.
• Kích hoạt tìm kiếm: Mở drawer tìm kiếm hoặc khung tìm kiếm toàn màn hình; bảo đảm ô nhập và danh sách gợi ý hiển thị trên tab bar.
• Thử popup marketing và pháp lý: Kích hoạt popup đăng ký email, mã giảm giá, banner cookie và popup xác thực tuổi để bảo đảm chúng nằm trên tab bar.
• Kiểm tra widget chat: Mở widget chat hỗ trợ; đảm bảo nút chat không đè lên hay che khuất các nút bấm của tab bar.
• Mở menu drawer của theme: Bấm vào nút hamburger của theme để xác nhận menu trượt mượt mà mà không bị cắt góc sau tab bar.
• Cuộn qua các section giàu đa phương tiện: Cuộn qua slider ảnh trang chủ, video banner nền để bảo đảm tab bar luôn hiển thị cố định.
• Kiểm tra trên iOS Safari: Mở cửa hàng trên iPhone thật bằng Safari, quan sát kỹ vùng phím điều hướng vuốt ở đáy màn hình.
• Kiểm tra trên Android Chrome: Mở cửa hàng trên điện thoại Android bằng Chrome để xác nhận độ nhạy của vùng chạm.
• Xoay ngang màn hình: Xoay thiết bị giữa chế độ dọc và ngang để kiểm tra độ thích ứng của media query.
• Xóa cache và xem ẩn danh: Kiểm tra trong cửa sổ ẩn danh để chắc chắn trình duyệt tải stylesheet mới nhất thay vì bản lưu tạm.

FAQ

How do I change the z-index of a tab bar?

Inspect cả hai phần tử bằng DevTools để so sánh giá trị lớp, sau đó gán cho tab bar một số nguyên thấp hơn hoặc cao hơn trong Custom CSS của theme hoặc trong cài đặt của app tab bar.

Why is my tab bar showing over the cart drawer?

Tab bar đang có giá trị z-index cao hơn cart drawer trong cùng stacking context; hãy hạ giá trị của tab bar xuống để cart drawer hiển thị phía trước.

Why does my z-index change have no effect?

Phần tử mục tiêu có thể đang ở vị trí static mặc định, hoặc nằm trong container cha tự tạo stacking context riêng biệt giới hạn thứ tự lớp bên trong nó.

Which z-index value should I use?

Không có số chuẩn chung vì mỗi theme và app sử dụng các số khác nhau; hãy chọn số giúp tab bar nằm trên nội dung trang nhưng nằm dưới giỏ hàng trượt, hoặc thử giá trị 50 và hạ dần nếu vẫn va chạm.

Where do I put the CSS in Shopify?

Đặt CSS cho toàn cửa hàng trong Shopify Admin tại Online Store > Edit theme > Theme settings > Custom CSS, áp dụng cho toàn bộ theme với giới hạn 1500 ký tự.

Sources

• MDN Web Docs: Understanding CSS z-index
• MDN Web Docs: The Stacking Context
• MDN Web Docs: z-index Property Reference
• Google web.dev: CSS z-index and Stacking Contexts
• Google Chrome DevTools: View and Change CSS
• Shopify Help Center: Adding Custom CSS to Your Theme
• Hextom Help Center: My Bar Is Covering Another Element – How to Fix It
• Conversion Bear Support: Sticky Bar Is Covering the Side Cart
• Ninja Commerce Support: Resolving Sticky Bar Overlap and Push Down Issues
• MakeProSimp Support: How Does Z-index Affect the Popup and Cart Drawer?