Question

我正在使用光滑的滑块http://kenwheeler.github.io/slick/，并希望将文字放在图像的顶部。因此我使用bootstrap carousel-caption，它适用于任何图像。光滑滑块的问题在于文本显示，但似乎不在最高级别＃34;。也就是说，似乎文本上方有一些图层，因为我无法突出显示文本或点击文本链接。

我做了一些研究，几乎所有的帖子都说我应该使用一个位置：相对于使z-index正常工作。例如，这篇文章：Slick slider text on top of images

但是，根据上述帖子的答案中的建议更改位置没有任何区别，并且更改z-index也不起作用。

＆＃13;

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

＆＃13;

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

Answer 1

你的问题是：

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

添加css代码，您就可以点击链接和点

删除.carousel-caption中的z-index。

我能够点击这两个选项..请检查并告诉我

使用Slick Slider和Bootstrap CSS在图像上方显示文本

1 个答案: