title: How to put contact form on slider
body: <p>I am trying to put my form on a slider in such a way that slider seems to be running in the background of form. If I am using position absolute, then I have to apply a lot of margin and top pixels because there is a navbar above the slider and position absolute applies with respect to the parent element(navbar).</p>
  
  <p>How can I exactly target the position absolute w.r.t my form, not navbar (parent element)?
  Or</p>
  
  <p>If you guys think that there can be a better option to deal with this then do share ideas!</p>
  
  <p>Thanks in advance! </p>
  
  <p>Here is the <a href="http://codepen.io/zeeshan55/pen/NAoLgG" rel="nofollow">demo link</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>    &lt;section id="main-slider" class="carousel"&gt;
  
  
      &lt;!--start--&gt;
      &lt;div id="ninja-slider"&gt;
          &lt;div class="slider-inner"&gt;
              &lt;ul&gt;
                  &lt;li  class="dummySlide"&gt;
                      &lt;a class="ns-img" href="img/002.jpg"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
  
  
  
                  &lt;li&gt;
                      &lt;a class="ns-img" href="img/003.jpg"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a class="ns-img" href="img/004.jpg"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a class="ns-img" href="img/005.jpg"&gt;&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a class="ns-img" href="img/zess.jpg"&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="navsWrapper"&gt;
                  &lt;div id="ninja-slider-prev"&gt;&lt;/div&gt;
                  &lt;div id="ninja-slider-next"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end--&gt;
  
  
  
      &lt;/section&gt;&lt;!--/#main-slider--&gt;
  
              &lt;form role="form"&gt;
  
  &lt;!--First Row--&gt;
     &lt;div class="row"&gt;
          &lt;div class="form-group col-md-6"&gt;
              &lt;label for="inputTopic" class="control-label"&gt;Title&lt;/label&gt;
              &lt;select class="form-control" name="title"&gt;
                      &lt;option value="0"&gt;Select&lt;/option&gt;
                      &lt;option value="one"&gt;Mr.&lt;/option&gt;
                      &lt;option value="two"&gt;Miss&lt;/option&gt;
                      &lt;option value="three"&gt;Mrs.&lt;/option&gt;
                      &lt;option value="four"&gt;Dr.&lt;/option&gt;
                  &lt;/select&gt;      
          &lt;/div&gt;
  
          &lt;div class="form-group col-md-6"&gt;
              &lt;label for="inputTopic" class="control-label"&gt;Sur-Name&lt;/label&gt;
                  &lt;input type="text" class="form-control"  name="surname" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>