невозможно добавить форму на caroiusel

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>

В моем проекте они требуют добавления формы на карусель, которую я пробовал со всеми решениями, которые я получил, но ни один из них не работал для меня.кто-нибудь может подсказать мне, как решить проблему?

Answer 1

Вы можете использовать шаблон положения relative и absolute следующим образом.

Обновление: убрать форму из div с каруселью и установить z-index для формы.

#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>