Question

我正在使用Slick JQuery插件进行轮播。

在我添加到的网站上，我有一个带有固定下拉菜单的固定标题。当我添加Slick轮播时，下拉菜单重叠（仅限Chrome）。菜单链接仍然可以点击;他们只是不可见。

JSFiddle：here

在实际网站中，不仅下拉菜单在旋转木马上方不可见，而且它也在旋转木马上方的所有其他元素后面，但在标题下方。太短而不能被旋转木马切断的下拉列表显示在所有其他元素之上：

JSFiddle：here

当我添加$('body').on('click', '.close', function() { alert("it works!"); return false; });功能以移除轮播时，菜单可以再次重叠，所以我相信它是Slick插件正在做的事情我不能够找到：

JSFiddle：here

有没有人碰到类似的东西？我还没能找到导致这个问题的因素。

编辑：我能够找到它的元素并解决问题。事实证明，有些CSS似乎并没有用于我需要的功能。

加载的CSS文件包含以下内容：

unslick

当我将它添加到JSFiddle中的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：here

我没有把这个作为答案，因为我不明白是什么导致了这个问题，但我确实希望发帖以防其他人需要。

Answer 1

您是否尝试过添加header{z-index: 100;} ?? 我有一个类似的问题，我用它修复了它。

Slick Slider JS +固定标题重叠问题 - 仅限Chrome

1 个答案: