概览
Zendesk Web Widget（经典）带有许多设置和自定义选项。有时您需要指定Web Widget（经典）相对于网页上其他内容的堆叠顺序。为此，将 z-index Web Widget（经典）设置中的 值。
本文重点介绍了 z-index更改您的小组件在您网站上的排列方式。
是什么 z-index？
Z-index 是一个 CSS 属性，用于设置重叠内容的可见度和位置.当两个元素重叠时， z-index 确定哪个元素显示在另一个的上面。的 z-index 值可以分配一个整数或全局值，例如继承，初始和未设置。
当使用整数时，元素的 z-index 分配给最大索引的将显示在其它元素前面。例如，如果容器 A 已分配 z-index / 2，容器 B 已分配 z-index 容器 A 位于容器 B 之前，共 1 个。使用全局值时，元素将采用相对于其父元素值的分配位置。
怎么样 z-index 与Web Widget（经典）有关？
您可以 z-index Web Widget（经典）的，在Web Widget（经典）前面显示您的内容，或将Web Widget（经典）完全隐藏在其他内容后面。
如何设置 z-index 我的Web Widget（经典）？
您可以设置 z-index 有两种方式访问您的小组件：
- 使用
window.zESettings对象。这将设置z-index当小组件首次加载时。有关使用 的更多信息，window.zESettings对象，请参阅开发者文档：设置参考。 - 使用
updateSettingsAPI。这将允许z-index将在运行时更新。有关使用 的更多信息，updateSettingsAPI，请参阅开发者文档：Core API。
z-index 设置默认索引为 999998，这意味着小组件将出现在屏幕的前面，除非另一个对象 z-index 超过该数字。使用窗口的范例。zESettings 对象
的 window.zESettings 对象允许您设置 z-index 页面加载时。
本例设置 z-index 使用 window.zESettings 对象。提醒您， window.zESettings 对象仅在小组件启动时加载。更新 z-index 运行时的值，使用 updateSettings API，请参阅以下示例。
以下是对 进行任何更改之前页面的外观 z-index Web Widget（经典）的值。正如预期的那样， Web Widget（经典）显示在其他内容的顶部：
在上面的例子中， z-index 容器元素的 个尚未显式设置。这意味着 z-index 容器元素的数量默认为 auto，对应于 0。要隐藏Web Widget（经典），请设置 z-index 小于 0 的值如下所示：
现在，当页面加载时， Web Widget（经典）将显示在容器元素后面。这是因为 z-index 容器元素 的值高于 z-index Web Widget（经典）的值。
新的 z-index 值会使Web Widget（经典）显示在网页其他元素的后面。
使用 的范例 updateSettings API
的 updateSettings API 为您提供实时更改的灵活性
从这些例子可以看出，模式对话框的默认值为 z-index / 2仅更改 z-index 小组件的 ，隐藏或将其置于屏幕前面。
示例 1：将Web Widget（经典）隐藏在模式对话框后面
在第一个示例中，要隐藏模式对话框后面的Web Widget（经典） ，请将小组件的 z-index 更改为 1（如下所示）。
看看实际的运用：
示例 2：将Web Widget（经典）置于模式对话框的最前端
此示例说明了如何使Web Widget（经典）显示在模式对话框前面，以便在页面上仍然可以访问。本例再次使用 zE webWidget 来 updateSettings 并设置 z-index 到 3。这将实际移动Web Widget（经典）的位置。
看看实际的运用：
概要和其他资源
作为网页开发者，您可以选择最佳方法来设置 z-index 您的Web Widget（经典）的值。的 window.zESettings 对象使您能够设置 z-index 页面加载时，而 updateSettings API 可让您灵活地实时更改。有关自定义小组件的更多信息，请参阅文章：Web Widget（经典）的高级自定义
翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性
如对翻译准确性有任何疑问，请以文章的英语版本为准。
0 条评论
登录再写评论。