title: How to put my form on top of an image in css/html?
body: <p>Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot. </p>
  
  <p><img src="https://i.imgur.com/1B1JsLm.png" alt="Screenshot of my Problem"></p>
  
  <p>Here are my codes:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div class="container" align="center"&gt;
        &lt;div id="image"&gt;
          &lt;img src="assets/img/imac.png" style="width:640px; height:678"&gt;
        &lt;/div&gt;
  
      &lt;div id="loginForm"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Please sign in&lt;/h3&gt;
         &lt;/div&gt;
           &lt;div class="panel-body"&gt;
             &lt;form accept-charset="UTF-8" role="form"&gt;
              &lt;fieldset&gt;
              &lt;div class="form-group"&gt;
                &lt;input class="form-control" placeholder="E-mail" name="email" type="text"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
               &lt;input class="form-control" placeholder="Password" name="password" type="password" value=""&gt;
              &lt;/div&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input name="remember" type="checkbox" value="Remember Me"&gt; Remember Me
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;input class="btn btn-lg btn-success btn-block" type="submit" value="Login"&gt;
            &lt;/fieldset&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
  background-color: #2ecc71;
  }
  
  
  .container {
  
  width: 1000px;
  height: 700px;
  margin-top: 100px;
  }
  
  #loginForm{
  width: 500px;
  height: 400px;
  }
  </code></pre>