Bootstrap 4 carousel an image does not overlay other images - html

Question

I am writing code with bootstrap 4. On my carousel images there should be another image ( a nice layer on the bottom), but with the code below it appears not on the bottom of the picture, but below it. Maybe you have any ideas how to fix this?
HTML
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img.img1.jpg" alt="First slide">
<img class="ex-img" src="img/img2.jpg" alt="orange-img">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/img2.jpg" alt="Second slide">
<img class="ex-img" src="img/img4.jpg" alt="orange-img">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/img5.jpg" alt="Third slide">
<img class="ex-img" src="img/img6.jpg" alt="orange-img">
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CSS
.carousel .slide{
position:absolute;
}
.carousel-item img{
position:relative;
}
.ex-img{
position:relative;
}

Answer 1

I'm not sure what you meant though, but try changing the style like below
<style>
.carousel-item {
position: relative;
}
.ex-img {
position: absolute;
left: 0;
bottom:0;
}
</style>