title: How to put Transparent HTML form on the top of sliding image in background using Angular JS
body: <p>I have created HTML Page which I will be make dynamic using Spring MVC.
  I am new to HTML, CSS,JS as well but I need to create banner images which will slide with certain internal. </p>
  
  <p><strong>I need to do following things:</strong></p>
  
  <ol>
  <li>Bannner Image  shoule slide with certain interval.</li>
  <li>I need to put Fixed HTML Search form on the top of sliding images.</li>
  <li>Currently banner  image is coming as center of the page I need to stretch to total with with of the page I have tried to change like <code>".imageslide{width:100%;.."</code> width 100% but it did not work.
  <a href="https://i.stack.imgur.com/s3zq9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s3zq9.jpg" alt="enter image description here"></a></li>
  </ol>
  
  <p>I Need to create exactly like bellow image: </p>
  
  <p><a href="https://i.stack.imgur.com/HBXbU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HBXbU.jpg" alt="enter image description here"></a></p>
  
  <p>Sliding banner Image I am able to make  with the  below HTML and JS code but Search Form on the top of sliding banner image I am not getting idea how can i make it: 
  I have seeing this <a href="https://stackoverflow.com/questions/27580993/how-to-put-my-form-on-top-of-an-image-in-css-html">link</a> but I could not make solution out if it :(. 
  <strong>index.html</strong> </p>
  
  <pre><code>&lt;htm ng-app&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="./angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'&gt;
    &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div id="withinheader"&gt;
              this is header
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"&gt;
              &lt;div class="slider-content" ng-switch-when="1"&gt;
              &lt;img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt=""&gt;
              &lt;/div&gt;  
              &lt;div class="slider-content" ng-switch-when="2"&gt;
              &lt;img src="./S_43_HomeDestinationImages_FriMar042016420.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="slider-content" ng-switch-when="3"&gt;
              &lt;img src="./S_43_HomeDestinationImages_FriMar042016575.jpg" alt=""&gt;
              &lt;/div&gt;  
              &lt;div class="slider-content" ng-switch-when="4"&gt;
              &lt;img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt=""&gt;
              &lt;/div&gt;  
          &lt;/div&gt;  
          &lt;div id="mainbody"&gt;
          this is body
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>function slideShowController($scope, $timeout) {
   var slidesInSlideshow = 4;
   var slidesTimeIntervalInMs = 3000; 
  
    $scope.slideshow = 1;
    var slideTimer =
      $timeout(function interval() {
        $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
        slideTimer = $timeout(interval, slidesTimeIntervalInMs);
      }, slidesTimeIntervalInMs);
  }
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>/* Styles go here */
  #header {
      background-color: #FFFFFF;
      width:100%;
      height:100px;
      border-bottom: 4px solid #EE514B;
  }
  
  .slideshow {
    font-family: "Arial", sans-serif;
    text-align: center;
    position:relative;
    width:600px;
    overflow:hidden;
    background: #1a1a1a;
    margin: 0 auto;
    color: white;
    text-shadow: 1px 1px 1px #000;
    border-radius: .3em;
    margin-top: 30px;
  }
  
  #withinheader {
      width:60%;
      margin: 0 auto;
      height: 100px;
  }
  
  .imageslide{
      width:100%;
      height:400px;
      margin: 0 auto;
      margin-bottom: 20px;
      overflow:hidden;
      position:relative;
      text-align: center;
  }
  
  .imageslide .slider-content {
    position: absolute;
    width:100%;
    height:400px;
  
  }
  
  .animate-enter,.animate-leave {
      -webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
      -moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
      -ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
      -o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
      transition:1000ms cubic-bezier(.165,.84,.44,1) all;
  }
  
  .animate-enter {
      left:100%;
  }
  
  .animate-enter.animate-enter-active {
      left:0;
  }
  
  .animate-leave {
      left:0;
  }
  
  .animate-leave.animate-leave-active {
      margin-left:-100%;
  }
  
  
  
  #mainbody {
      background-color: #FFFFFF;
      width:50%;
      min-height:1024px;
      height: auto;
      border-radius: 5px;
      border: 1px solid #EEEEEE;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>Please help  me on this
  I need make this webpage using Angular JS, and MVC, how should I approach. </p>
  
  <p>Thanks in advance for help and information to make it work. </p>