javascript - 如何将联系表放在 slider 上

Question

我试图将我的表单放在 slider 上，使 slider 似乎在表单的后台运行。如果我使用绝对位置，那么我必须应用大量边距和顶部像素，因为 slider 上方有一个导航栏，并且绝对位置适用于父元素(导航栏)。

如何准确定位表单的绝对位置，而不是导航栏(父元素)？ 或者

如果你们认为可以有更好的选择来处理这个问题，那么请分享想法!

提前致谢!

这是demo link

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>

Answer 1

我确实有一个使用 TWBS 轮播的工作示例。我创建了一个包装器 .container ，它有一个 slider 和一个表单作为子项。 slider 是全 Angular 的，而表单的宽度为 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>

Bootstrap :http://www.bootply.com/tNAmbhKWb7