Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I cannot select or click on it.
After researching, many sources suggest that I should use position:relative to solve the z-index issue. One example is this discussion: Slick slider text on top of images
Despite following the recommendations in the provided answers, changing the position and adjusting the z-index values did not yield any changes.
.carousel-caption {
top: 50%;
transform: translateY(-50%);
bottom: initial;
z-index: 1200;
}
.slick-slide, .slick-track, .slick-list, .slick-slide-fade {
/* ... */
position: relative;
}To view the complete code, please refer to my fiddle: https://jsfiddle.net/gnrqhk32/6/#&togetherjs=4RVVzljQI4