Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to the presence of a navbar above the slider since position absolute is relative to the parent element (navbar).
I'm looking for a solution that will allow me to target the position absolute specifically with respect to my form, rather than the navbar (parent element). If anyone has alternative suggestions or ideas on how to tackle this issue more effectively, please feel free to share!
Thank you in advance!
For a demo of the code, please refer to the demo link
Below is the snippet of HTML code:
<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>