如何將聯系表單放在滑塊上

Question

我正在嘗試將表單放在滑塊上，使滑塊似乎在表單的后台運行。 如果我使用的是絕對位置，那么我必須應用大量的邊距和頂部像素，因為滑塊上方有一個導航欄，而絕對位置相對於父元素（navbar）適用。

如何准確定位我的表單的絕對位置而不是navbar（父元素）？ 要么

如果你們認為可以有更好的選擇來解決這個問題，那就分享想法！

提前致謝！

這是演示鏈接

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 ，其中有一個滑塊和一個子窗體。 滑塊的寬度為全角，而表單的寬度為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>

Bootply： http ： //www.bootply.com/tNAmbhKWb7

Answer 2

您沒有帶有class="formSection"包裝器，並且還應該從formSection類中刪除一個bottom: 0 。

Answer 3

<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">

在哪里聲明<div class="row">

把這個代碼
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"

這肯定會工作