如何实现具有正 z-index 的多步进度条？
How to implement a multi step progress bar with a positive z-index?
我正在开发一个实现多步进度条的应用程序（请查看示例 here）。它是使用 sass/scss 作为 Angular5 组件实现的。
除了将组件作为列模板插入 Kendo 网格之外，进度条在任何地方都很好用。由于进度条依赖于 z-index 被设置为步骤之间的线 -1，因此进度条的这一部分隐藏在 Kendo 网格后面。
仅使用正 z-index 如何实现相同的进度条。
我尝试将 z-index: -1 更改为 1 并将 z-index:2 添加到 scss 的其他部分，但我没有成功隐藏 ::before 和 ::after 的步骤之间的线.更改 Kendo 网格上的 z-index 不是一个选项，因为它会破坏网格的功能。 （此外，Kendo 建议不要这样做，请参阅 here ）
根据给定的示例，z-index: -1; 应用于 li::after 伪元素，您可以将其增加到更高的值（例如 2）。
现在，您需要将 li::before 伪元素的 z-index 增加到更高的值（例如 3）。
最后你需要给它设置 position: relative;，因为 z-index 对静态元素不起作用。
更新示例 here
我正在开发一个实现多步进度条的应用程序（请查看示例 here）。它是使用 sass/scss 作为 Angular5 组件实现的。
除了将组件作为列模板插入 Kendo 网格之外，进度条在任何地方都很好用。由于进度条依赖于 z-index 被设置为步骤之间的线 -1，因此进度条的这一部分隐藏在 Kendo 网格后面。
仅使用正 z-index 如何实现相同的进度条。
我尝试将 z-index: -1 更改为 1 并将 z-index:2 添加到 scss 的其他部分，但我没有成功隐藏 ::before 和 ::after 的步骤之间的线.更改 Kendo 网格上的 z-index 不是一个选项，因为它会破坏网格的功能。 （此外，Kendo 建议不要这样做，请参阅 here ）
根据给定的示例，z-index: -1; 应用于 li::after 伪元素，您可以将其增加到更高的值（例如 2）。
现在，您需要将 li::before 伪元素的 z-index 增加到更高的值（例如 3）。
最后你需要给它设置 position: relative;，因为 z-index 对静态元素不起作用。
更新示例 here