jquery - Slick Slider JS + 修复了标题重叠问题 - 仅在 Chrome 中

Question

我正在使用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

我没有将此作为答案，因为我不明白导致问题的原因，但我确实想发布此内容，以防其他人需要。

Answer 1

您是否尝试过添加 header{z-index: 100;} ？我遇到了类似的问题，并解决了它。