highslide - 如何让 highslide 自定义叠加 Z-index 工作？

Question

我已经实现了 highslide 自定义覆盖以包含“下一个”和“上一个”链接以在图像之间导航。我需要链接相对于屏幕，因为我正在做一个响应式网站。所以我设置hs.registerOverlay({ relativeTo: 'viewport' });. 但随后发生的情况是，“下一个”和“上一个”链接始终出现在扩展器下方，而不管我对任何包含元素强制使用的 Z 索引如何。如何让 Z-index 工作？

Answer 1

我不认为你可以用 z-index 值来解决这个问题，因为 Highslide 脚本本身正在渲染两个对象（扩展器和覆盖），并且它强加了自己的堆叠顺序。

解决此问题的最简单方法就是限制扩展器的大小。假设您的链接被放置在视口的底部，它们的高度为 30 像素。将 hs.bottomMargin 从默认的 15 更改为 45，就可以了。