防止Navi+菜单与其他应用重叠

为什么这会成为一个问题？

在许多情况下，您需要在网站上使用多个嵌入的应用程序。这可能会造成常见的可用性问题，因为界面元素可能会重叠（见下图）。一个简单的例子是当您经常使用像Shopify Inbox 或WhatsApp这样的聊天应用程序时。通常，这些聊天应用程序占据手机屏幕右下角的显著位置。当您决定使用Navi+来显著增强网站的导航时，这个问题就出现了。以下是一些解决此问题的方法。

解决方案1：调整浮动按钮的位置（与Shopify Inbox的演示）

解决方案2：设置Navi+菜单的内边距以避免与应用程序重叠。

内边距和外边距是技术中广泛使用且强大的工具，尤其是在HTML5/CSS中。通过根据该区域的位置设置内边距，您可以避免应用程序的重叠。您还可以通过调整外边距设置Navi+菜单与边缘的距离。

解决方案3：用顶部栏/支持栏或浮动操作按钮替换底部栏

尽管底部栏是引导用户的最有效工具，几乎所有移动原生应用程序或移动网页（较慢）都在使用，但有时您可能希望将Navi+菜单放置在不同的位置，例如顶部（顶部栏）、右侧/左侧（支持栏）、浮动在界面上方（浮动操作按钮）。或者您可以将它们结合起来以获得最佳的导航效率。查看Navi+的以下选项以了解如何做到这一点，有时只需1秒，您就能解决问题。

Z-index - 优先显示”浮动应用程序”的顺序

z-index属性指定元素的堆叠顺序。堆叠顺序较大的元素总是在堆叠顺序较小的元素前面。请参见下图以了解更多信息。

Navi+菜单的默认z-index设置为50，因为我们“并不认为自己比其他应用程序更重要”，但50也是在所有Shopify主题上良好显示的足够数字。有时您可能需要在以下情况下调整Navi+菜单的z-index：

当您在一页上使用多个Navi+菜单并希望它们重叠，但一个菜单出现在其他菜单之上。
当有其他对象/应用程序重叠您的Navi+菜单时，在这种情况下，z-index将解决所有问题。

有一个棘手的问题：您应该为Navi+菜单设置什么z-index以避免重叠？如果您有多个Navi+菜单，您可以根据自己的喜好进行排列，而无需担心——这就是我们构建Navi+以尽可能灵活地适应当前Shopify上的“浮动应用程序”的原因。

如果您需要为Navi+菜单设置z-index以处理与其他应用程序的冲突，您可以从0到2,147,483,647的最小值中搜索您的z-index。这可能看起来有点困难，但这是最简单和最好的方法，因为z-index不会影响您的界面显示，除了您面临的问题。如果您对CSS和HTML调试有经验——这很简单，只需打开检查模式以查看冲突应用程序的z-index。或者，最简单的方法，直接点击Crisp聊天图标与Navi+顾问聊天；我们很乐意帮助您解决这个问题。