How to place text over sliding images - html

Question

Whenever I run this code on the HTML page, it shows the box with the text on the first sliding image for a brief second, then it disappears for some reason. Here is the HTML for the sliding images.
.containerSlider {
position: relative;
}
.text-block {
position: absolute;
bottom: 100px;
right: 150px;
background-color: black;
color: white;
}
<section>
<div id="containerSlider">
<div id="slidingImage">
<img src="https://via.placeholder.com/100" alt="image4">
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100/ffcccc" alt="image1">
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100" alt="image2">
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100/ffcccc" alt="image3">
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
</div>
</section>
and the Javascript for the Slider is
<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js”></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function () {
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
});
</script>

Answer 1

You have to add position:relative to the div you want your text to be placed in. In your case, .containerSlider contains the complete slider but we want to target individual slides which in this case are .slidingImage.
So, after updating your CSS to something like the code below, I believe I got what you wanted.
#slidingImage {
position: relative;
width: fit-content;
}
p {
position: absolute;
bottom: 10%;
background-color: black;
color: white;
}
<section>
<div id="containerSlider">
<div id="slidingImage">
<img src="https://via.placeholder.com/100" alt="image4" />
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100/ffcccc" alt="image1" />
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100" alt="image2" />
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
<div id="slidingImage">
<img src="https://via.placeholder.com/100/ffcccc" alt="image3" />
<div class="text-block">
<p>This is a text to see if this works</p>
</div>
</div>
</div>
</section>

Answer 2

.slidingImage {
height: 100px;
width: 100px;
color: white;
overflow-wrap: break-word;
display: flex;
justify-content:center;
align-items:center
background-repeat: no-repeat;
margin-bottom: 10px
}
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
<p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
<p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
<p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
<p>This is a text to see if this works</p>
</div>
here