带有光滑滑块和引导CSS的图像顶部文字

Question

我正在使用Slick Slider http://kenwheeler.github.io/slick/，并希望将文本放在图像顶部。因此，我使用bootstrap旋转旋转木马，这对于任何图像都很好。Slick Slider的问题是文本显示，但似乎并不处于最高的"级别"。也就是说，看来文本上方有一层，因为我无法突出显示文本或单击文本链接。

我做了一些研究，几乎所有帖子都表明我应该使用一个立场：相对使z索引正常工作。例如，这篇文章：图像顶部的光滑滑块文本

但是，更改上述帖子答案中建议的位置并没有任何区别，并且更改z index也行不通。

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial
  z-index: 1200;
}
.slick-slide, .slick-track, .slick-list, .slick-slide-fade {
    /* ... */
    position: relative;
}

有关完整代码，请参阅我的小提琴：https://jsfiddle.net/gnrqhk32/6/#& pogetherjs=4rvvzljqi4

Answer 1

您的问题是：

.slick-slide, .slick-track, .slick-list, .slick-slide-fade {
  /* ... */
  position: relative;
  z-index:100;
}

补充说CSS代码，您将能够单击链接和点

删除您在.carousel caption中的z索引。

我能够单击两个选项。请检查并让我知道