Z-index

这是一个常见的问题,但在使用Navi+时非常容易处理。您的网站可能有许多浮动元素——请查看下面的示例以识别它们。

Note: These are the current z-index setups on the Dawn theme (Shopify’s most popular free default theme) at this time.

这些浮动元素由它们自己的z-index值控制。z-index越高,该元素在显示时的优先级就越高。棘手的部分是,z-index值没有固定的规则。您可以分配任何数字,最高可达2,147,483,647。您使用的每个主题和在您的Shopify商店上运行的每个应用程序都可以为浮动组件分配自己的z-index——通常基于开发者的偏好。当这些元素在您的网站上交互时,它们可能会以意想不到的方式重叠。

让我们来点乐子 :joy:: 仔细看看上面的截图,您会看到——是的,这是一团糟,绝对没有规则。您正在查看的网站背后有三位开发者。

构建Dawn主题的开发者为菜单面板选择了z-index为3,为购物车面板选择了1000——完全无关,没有明确的逻辑。

然后是Rivo Loyalty Rewards应用的开发者——一个流行的忠诚度工具——他们选择了z-index为99999999999,可能甚至没有计算他们输入了多少个9。他们唯一的目标是:确保浮动的“奖励”按钮始终位于最上面,无论如何,甚至在您的购物车面板之上。

与此同时,Navi+的开发者谦虚地选择了一个较小的数字——仅为5——因为我们不想过于激进或侵入。那么,您应该怎么做?

步骤1: 找到您的Navi+菜单的正确z-index

方法1:询问Navi+支持(最简单)

这是最好的和最有效的方法。我们可以为您提供有关关键界面元素的z-index值的信息,例如菜单面板、购物车面板以及您正在使用的任何第三方应用程序,然后推荐最适合您情况的z-index设置。

请随时使用屏幕右下角的聊天框与Navi+支持人员交谈。Navi+正在成长,我们非常重视您的反馈——您的问题帮助我们指导我们构建更好的产品。

我们不是24/7在线——每天只有14小时,基于越南时区。然而,一旦我们看到您的消息,我们会立即回复。

方法2:使用浏览器的检查模式(详细,但需要一些技术知识)

到目前为止,除非您使用检查模式,否则没有更好的方法来自己检查。这种开发者工具在所有现代浏览器中都可用,如Chrome、Firefox、Safari或Edge。右键单击您网站上的任何地方,然后选择检查以打开检查模式。

方法3:根据我们的建议尝试和测试(个人经验)

在大多数情况下,如果您没有使用太多应用程序,z-index问题是很少见的。主要问题通常来自于您的菜单与其他界面元素(如菜单面板或购物车面板)之间的重叠。

  • 对于Navi+的粘性菜单,如Tabbar或FAB:我们建议保持z-index较低,约为2或3。这些菜单占用屏幕空间,如果它们覆盖了功能面板(如购物车),会感觉破损或烦人。
  • 对于Navi+的部分菜单,如Mega菜单:如果放置在顶部(在标题中),您可以安全地设置一个非常高的z-index(例如2000000000),以确保下拉子菜单不会被其他组件隐藏。
  • 对于Navi+的网格菜单:z-index没有效果,因为菜单是平面的,没有分层深度。
  • 对于Navi+的滑动菜单:z-index应设置得非常高(例如2000000000),以避免被其他元素隐藏。

步骤2: 更新您的Navi+菜单的z-index

如何更新Navi+菜单的z-index?

选择高级菜单,向下滚动找到Z-index卡片,然后更新z-index,别忘了点击保存以应用更改。