无法在旋转木马上添加表格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无法在旋转木马上添加表格相关的知识，希望对你有一定的参考价值。
<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>
在我的项目中，他们需要在旋转木马上添加表格，我尝试了所有的解决方案，但我没有工作。谁能指导我如何解决这个问题？
答案
你可以像这样使用位置relative和absolute模式。
更新：将表单移出owl carousel 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>以上是关于无法在旋转木马上添加表格的主要内容，如果未能解决你的问题，请参考以下文章