Javascript 光滑滑块z索引问题

我正在使用slick slider，并用它创建了以下自定义布局

我现在要做的是在幻灯片上方放置文本和按钮，用户可以在强光下或点击。在寻找这个问题时，我发现了我所关注的问题，并补充说

position: relative;

到幻灯片的主类

my_滑块

和单个幻灯片

slick幻灯片

然而，这对我不起作用。因此，我所做的是将

z-index:1

添加到

slick幻灯片

类和

z-index:2到按钮。但这也不起作用。我真的不确定我做错了什么

我把这个问题重新编造了一遍
在添加之前，您可以使用以下解决方案

要突出显示文本，可以从reactiveslick.css文件中的
.slick slider{…}
中删除以下样式

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

.slick-slider{
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

或者可以使用css文件中的以下代码覆盖它

.slick-slider{
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

现在需要重置
translate3d（0,0,0）在
.my_滑块中使用下面的

.slick-slider .slick-list {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

另外，请注意，由于
.slider导航缩略图与
.my_滑块重叠，第二个原因导致按钮单击和高亮显示不起作用

要消除这种情况，可以设置
z-index:1
到
.my_滑块
作为其已定位的
相对


希望这能有所帮助。
你的小提琴似乎没有显示一个有效的演示。你能考虑用光滑的init来更新它吗？我道歉。我在添加javascript之前保存了fiddle，然后在添加javascript之后忘记了获取新的更新链接。帖子已经用正确的链接更新。谢谢你的回复。我已经将css添加到我的本地和小提琴中，但两者都不起作用。令人惊叹的。这很有效。我接受你的回答。但我有点困惑。你到底加了什么？我已经更新了我的答案，还加了一把新小提琴。请看一看。非常感谢。