I am facing an issue with my Bootstrap carousel where the z-index is not working as expected. The decoration I have in the background is overlapping the text instead of appearing behind it. I want the illustration to be positioned under the text.
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
z-index: 0;
}
article {
z-index: 1;
}
.illustration {
z-index: 0;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d524d50">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section>
<div class="container position-relative">
<div class="carousel slide carousel-fade" id="ExampleCarousel" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#ExampleCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#ExampleCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row py-0">
<article class="col-12 position-relative">
<div class="row">
<header>
<h2>The Title</h2>
</header>
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel elementum sapien. Fusce ac pellentesque mi. Nulla sollicitudin euismod quam efficitur aliquet. Integer convallis tempus elit, aliquet ullamcorper arcu rutrum vitae.
Vivamus sit amet lobortis erat, ut congue est. Etiam sit amet ipsum rhoncus, vestibulum</p>
</div>
</div>
</article>
<div class="col-md-5">
<img src="https://via.placeholder.com/80" alt="Image" class="img-fluid">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row py-0">
<article class="col-12 position-relative">
<div class="row">
<header>
<h2>The Title</h2>
</header>
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel elementum sapien. Fusce ac pellentesque mi. Nulla sollicitudin euismod quam efficitur aliquet. Integer convallis tempus elit, aliquet ullamcorper arcu rutrum vitae.
Vivamus sit amet lobortis erat, ut congue est. Etiam sit amet ipsum rhoncus, vestibulum</p>
</div>
</div>
</article>
<div class="col-md-5">
<img src="https://via.placeholder.com/80" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="illustration position-absolute">
<svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 22.48A54.831 54.831 0 0 1 5.076 18c-1.044-1.53-2.072-3.23-2.837-4.918C1.469 11.382 1 9.77 1 8.4a7.35 7.35 0 0 1 2.192-5.228A7.552 7.552 0 0 1 8.5 1c1.993 0 3.902.782 5.307 2.172A7.35 7.35 0 0 1 16 8.4c0 1.37-.468 2.982-1.239 4.682-.765 1.688-1.793 3.388-2.837 4.917a54.819 54.819 0 0 1-3.424 4.48ZM5.65 11.232A4.054 4.054 0 0 0 8.5 12.4a4.054 4.054 0 0 0 2.85-1.167A3.982 3.982 0 0 0 12.536 8.4a3.982 3.982 0 0 0-1.186-2.833A4.054 4.054 0 0 0 8.5 4.4a4.054 4.054 0 0 0-2.85 1.167A3.982 3.982 0 0 0 4.465 8.4c0 1.065.428 2.083 1.187 2.833Z" stroke="#B5B5C3" stroke-width="2"/></svg>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c6167">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>EDIT
For easy reference, check out this codepen: https://codepen.io/andrea121/pen/WNZBYPL If you remove "carousel-fade" from the code, the two svg images will appear behind the text. But when "carousel-fade" is added, the issue arises.