unable to add form on caroiusel - php

Question

<section id="owl-banner" class="owl-carousel owl-theme">
<div class="item">
<img src="img/banner/banner-2.jpg" alt="banner image 2">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Truhealing-</h5>
<p style="color:#ffffff; font-size:30px;font-family:Titillium Web;line-height:1.6;">Complete Health care <br>Solution for women</p>
</div>
</div>
<div class="item">
<img src="img/banner/banner-5.jpg" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Your health is in <br>your hands</h5>
</div>
</div>
<div class="item">
<img src="img/banner/banner-3.jpg" alt="banner image 3">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Get your hormones <br>working for you</h5>
</div>
</div>
<div class="item">
<img src="img/banner/banner-4.jpg" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Address <br>the root cause</h5>
</div>
</div>
<div class="col-md-6">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</section>
In my project their is requirment of adding form on carousel i have tried with all the solutions which i got but none worked for me . can any one guide me how to solve the issue ?

Answer 1

You can use position relative and absolute pattern like this.
Update: move form out of ow carousel div and set z-index for form.
#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<div id="banner">
<section id="owl-banner" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 2">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Truhealing-</h5>
<p style="color:#ffffff; font-size:30px;font-family:Titillium Web;line-height:1.6;">Complete Health care <br>Solution for women</p>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Your health is in <br>your hands</h5>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 3">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Get your hormones <br>working for you</h5>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Address <br>the root cause</h5>
</div>
</div>
</section>
<div class="col-md-6">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>