Bootstrap carousel, card with text on top - html

Question

I have a bootstrap carousel on which I want to place a card with text.
The problem is that that whatever I try, it's not putting it on top.
This is what I want:
Thi is the code:
<section id="hero">
<div class="vh-72">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/carousel_1.jpg" class="d-block w-100" alt="Carousel image one">
</div>
<div class="carousel-item">
<img src="images/carousel_2.jpg" class="d-block w-100" alt="Carousel image two">
</div>
</div>
</div>
<div class="container bg-danger">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card">
<h1>Some title text <br> bla bla </h1>
Optimieren Sie Ihre Unternehmenserfolg durch Auslagerung Ihrer Produktionsleistung und gestalten Sie Ihre
Prozesse zukunftsorientiert.
Unser Team Nord Ihnen kompetente Mitarbeiter in Produktionsprozessen der industriellen Herstellung. <br>
<button> test </button>
</div>
</div>
</div>
</div>
</div>
</section>
I've tried using position: absolute with z-index, but it just moves it wrong.
Here is the JSFiddle: https://jsfiddle.net/txyzs8fk/

Answer 1

Can you please check the below code? Hope it will work for you. We gave position relative to #hero div and added one parent div hero-description of Card and gave position absolute and z-index, also we have set it's position using bootstrap utility class.
Please refer this link https://jsfiddle.net/8mdaqoup/
.row {
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#hero { position:relative;}
.hero-description { height:100%; width:100%; position:absolute; top:0; left:0; z-index:1;}
.hero-description .card { padding:30px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<section id="hero">
<div class="vh-72">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1608096299230-81c7b43d5dfc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80"
class="d-block w-100" alt="Carousel image one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1349&q=80"
class="d-block w-100" alt="Carousel image two">
</div>
</div>
</div>
<div class="hero-description">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-md-6 col-sm-12">
<div class="card">
<h1>Some text <br> bla bla bla </h1>
<p>
Optimieren Sie Ihre Unternehmenserfolg durch Auslagerung Ihrer Produktionsleistung und gestalten Sie Ihre Prozesse zukunftsorientiert. Unser Team Nord Ihnen kompetente Mitarbeiter in Produktionsprozessen der industriellen Herstellung.
</p>
<button> test </button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>