Javascript 如何在滑块上放置接触窗体

我试着把我的表格放在一个滑块上，这样滑块就好像是在表格的背景下运行。如果我使用绝对位置，那么我必须应用大量边距和顶部像素，因为滑块上方有一个导航栏，绝对位置相对于父元素（导航栏）应用

我怎样才能准确地定位表格中的绝对位置，而不是导航栏（父元素）？ 或

如果你们认为有更好的方法来解决这个问题，那就分享你们的想法吧

提前谢谢

这是你的电话号码

HTML代码：

    <section id="main-slider" class="carousel">


    <!--start-->
    <div id="ninja-slider">
        <div class="slider-inner">
            <ul>
                <li  class="dummySlide">
                    <a class="ns-img" href="img/002.jpg"></a>
                </li>




                <li>
                    <a class="ns-img" href="img/003.jpg"></a>
                </li>

                <li>
                    <a class="ns-img" href="img/004.jpg"></a>
                </li>

                <li>
                    <a class="ns-img" href="img/005.jpg"></a>
                </li>

                <li>
                    <a class="ns-img" href="img/zess.jpg"></a>
                </li>
            </ul>
            <div class="navsWrapper">
                <div id="ninja-slider-prev"></div>
                <div id="ninja-slider-next"></div>
            </div>
        </div>
    </div>
    <!--end-->



    </section><!--/#main-slider-->

            <form role="form">

<!--First Row-->
   <div class="row">
        <div class="form-group col-md-6">
            <label for="inputTopic" class="control-label">Title</label>
            <select class="form-control" name="title">
                    <option value="0">Select</option>
                    <option value="one">Mr.</option>
                    <option value="two">Miss</option>
                    <option value="three">Mrs.</option>
                    <option value="four">Dr.</option>
                </select>      
        </div>

        <div class="form-group col-md-6">
            <label for="inputTopic" class="control-label">Sur-Name</label>
                <input type="text" class="form-control"  name="surname" />
        </div>
    </div>
</form>

标题
挑选
先生
错过
夫人
博士
苏尔名字

表单没有带

class=“formSection”

的包装器，还应该从

formSection

类中删除

底部：0

。

我有一个使用TWBS旋转木马的工作示例。我创建了一个包装器

.container

，它有一个滑块和一个窗体作为子对象。滑块是全宽的，而窗体的宽度为

70%

，因此它将始终响应，高度目前是静态的，您可以使用媒体查询来更改。以下是我的例子：

<div class="container">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 </div>
 <div class="myform">
   <h1> My Form </h1>
   <form>
      ...
   </form>
 </div>
</div>

我的表格
...

引导层：

您在其中声明

输入此代码

---

请您在这里或在jsfiddle上创建一个（非）工作示例，我们可以在这里尝试帮助您。不看就很难说。特别是没有你的css…@eisbehr这里是为什么不使用TWBS的旋转木马的链接？不需要额外的插件，因为它已经在那里供您使用。见@LuukSkeur谢谢你的建议！但我对滑板很满意。我的问题是，我的表格没有得到滑块的响应。它在小分辨率上超出了滑块，而我希望看到它在滑块上表现出响应性。若你们知道我该怎么做，那个么即使你们对TWBS的旋转木马很满意，也要和我分享你们的想法！这有助于在一个li（列表项）中显示我的表单。当幻灯片在窗体上移动时，窗体将消失。但我想保持我的状态不变，即使幻灯片继续移动！此外，我的代码中没有使用class=“formSection”。我尝试了您建议的代码。但是，有一个问题。实际上，我的表单中有很多字段。为了给你一个想法，我给你看了两个领域。。。。。。。。。。。现在！“我的滑块”具有响应性，但当滑块移动到小分辨率时，窗体会在滑块外移动。表单应该与滑块一起响应。不，这不是解决方案，因为我的表单有很多字段要显示，所以在小屏幕上，它会出现在滑块外部。你能帮我一个忙吗？请访问我的代码打开链接，看看您是否可以像在本演示中一样编辑我的代码？这不是问题所在，请编辑您的问题。那么，滑块高度应该调整到窗体高度。。？使用插件
匹配高度
，为滑块元素提供背景图像，背景大小为
封面
。我的解决方案是：嘿！为什么表单字段开始出现在中小屏幕上？即使在中小型屏幕上，是否有可能使窗体的高度与滑块的高度完全相等？正如我所说，@bc110402307SyedZeeshanHaide。。这不是你的问题，你的问题是把表格放在滑块上。不将滑块的高度调整为窗体的高度。请创建一个新问题或查看此插件
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">