title: How can i set form and iframe tag between header and footer, css?
body: <p>I have no idea why that happens! I didn't set any z-index for my elements, but footer is obviously on the top of form and iframe. I don't understand why...</p>
  
  <pre><code>&lt;div class="frontpage1"&gt;
    &lt;div class="frontpage1-text"&gt;
  
         .............
  
         &lt;iframe id="map" src="" width="600" height="460" frameborder="0" style="border:0" allowfullscreen &gt;
              &lt;/iframe&gt;
  
      &lt;footer id="tail"&gt;
      &lt;br&gt;&lt;br&gt;
        &lt;img src="../work-files/logo.png" style="width: 160px;" &gt;
        &lt;br&gt;
        &lt;p&gt;RH Stuido Photography | Timless Photography&lt;/p&gt;
        &lt;p&gt;rick@rhstudiophoto.com | Abbotsford, British Columbia&lt;/p&gt;
       &lt;br&gt;&lt;br&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pJrWu.png" rel="nofollow noreferrer"> screenshot </a></p>
  
  <p>and Thats my css code :</p>
  
  <pre><code>.container {
      border-radius:5px;
      position:absolute;
      padding-left:250px;
      width:30%;
  }
  iframe {
      float:right;    
      position:absolute;
      padding-top:35px;
      right:200px;
  }
  footer {
      position: relative;
      bottom: 0px;
      width: 100%;
      text-align:center;
      background-color:black;
      color:rgba(255, 255, 255, 0.5);
      font-size:10px;
  }
  </code></pre>