我正在使用Slick用于轮播的 JQuery 插件。
在我添加它的网站上,我有一个带有固定下拉菜单的固定标题。 当我添加 Slick 轮播时,下拉菜单是重叠的(仅在 Chrome 中)。 菜单链接仍然可点击;它们只是不可见。
JSFiddle:here
在实际的网站中,下拉菜单不仅在轮播上方不可见,而且位于轮播上方、标题下方的所有其他元素后面。 太短而无法被轮播截断的下拉菜单显示在所有其他元素之上:
JSFiddle:here
当我添加 unslick
函数来删除轮播时,菜单能够再次重叠,所以我相信这是 Slick 插件正在做的事情,但我无法找到:
JSFiddle:here
有人遇到过类似的事情吗?我无法找到导致此问题的元素。
<小时/> <小时/>编辑:我能够找到它是哪些元素,并解决问题。事实证明,这是一些 CSS 似乎没有用于我需要的功能。
加载的 CSS 文件具有以下内容:
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
当我将其添加到 JSFiddle 中的 CSS 文件时,它可以工作:
.slick-slider .slick-track,
.slick-slider .slick-list
{
transform: none;
}
JSFiddle:here
我没有将此作为答案,因为我不明白导致问题的原因,但我确实想发布此内容,以防其他人需要。
最佳答案
您是否尝试过添加 header{z-index: 100;}
?
我遇到了类似的问题,并解决了它。
关于jquery - Slick Slider JS + 修复了标题重叠问题 - 仅在 Chrome 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34521587/